S
SolidJS14mo ago
Mathieu

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
lxsmnsyc14mo ago
This is one of the cases you'll probably want to use a signal for capturing refs rather than use a variable.
Mathieu
Mathieu14mo ago
How will a signal help? And what about setTimeout(..., 0), would that execute after DOM renders?
lxsmnsyc
lxsmnsyc14mo 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
Mathieu
Mathieu14mo ago
I thought so but createEffect doesn't guarantee me that the dom is re-rendered in this case or does it?
lxsmnsyc
lxsmnsyc14mo 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
Want results from more Discord servers?
Add your server
More Posts