Skip to content

setStyle calls cause unnecessary code execution #148

Open
@Ledzz

Description

When frequently calling ref.current.setStyle on container, there's some unneccessary code executed. If we do the same but by passing property as signal and updating this signal, code works much faster.
I found that this line causes this problem: computed body runs, handlers object is created, and this effect runs, even if handlers weren't changed.

Moving handlers object creation fixes the problem:

export function computedHandlers(
  style: Signal<Properties | undefined>,
  properties: Signal<Properties | undefined>,
  defaultProperties: Signal<AllOptionalProperties | undefined>,
  hoveredSignal: Signal<Array<number>>,
  activeSignal: Signal<Array<number>>,
  dynamicHandlers?: Signal<EventHandlers | undefined>,
  defaultCursor?: string,
) {
  const handlers: EventHandlers = {}
  
  return computed(() => {
    addHandlers(handlers, dynamicHandlers?.value)
    addHoverHandlers(handlers, style.value, properties.value, defaultProperties.value, hoveredSignal, defaultCursor)
    addActiveHandlers(handlers, style.value, properties.value, defaultProperties.value, activeSignal)
    return handlers
  })
}

But I don't know if this solution is OK.

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions