Make sure the dom updates (equivalent of `tick` in Svelte)?

I created some library where a piece of code relies on the dom having been updated:

// in some callback
setError(true);

// errorRef is only available when `setError(true)` updated the dom
errorRef.style.width = `${width}px`;

// ...

<Show when={error()}>
  <div ref={errorRef!}>{translate('error')</div>
</Show>

// in some callback
setError(true);

// errorRef is only available when `setError(true)` updated the dom
errorRef.style.width = `${width}px`;

// ...

<Show when={error()}>
  <div ref={errorRef!}>{translate('error')</div>
</Show>

This actually will work except if the client code uses batch and the code above is executed within that batching (the code above being library code). Thus if there's batching from the client code (which I can't control), errorRef is undefined and accessing style throws an error.

5 Replies

lxsmnsyc•2y ago

This is one of the cases you'll probably want to use a signal for capturing refs rather than use a variable.

MathieuOP•2y ago

How will a signal help? And what about setTimeout(..., 0), would that execute after DOM renders?

lxsmnsyc•2y ago

How will a signal help

so that when the setter is called for the ref, you can react to it through createEffect You can probably search about this topic in this server. It has been talked a lot

MathieuOP•2y ago

I thought so but createEffect doesn't guarantee me that the dom is re-rendered in this case or does it?

lxsmnsyc•2y ago

well with signal you're guaranteed to receive the DOM node inside createEffect it doesn't guarantee that the node is in the document though you'll have to use something like MutationObserver to be that accurate

Gaming

Programming

Make sure the dom updates (equivalent of `tick` in Svelte)?