How can I get a function to be executed just after insertion into DOM?

[danieltroger]

Hi,

I want to know how I can get a function to execute after the insertion of something into the DOM. So a signal updates with some elements and I want to have a function executed after they're inserted into the DOM.

Reason for that is that I'm using an IntersectionObserver polyfill that fails if I .observe nodes that are not yet in the DOM. I will create a mutation observer for now but I'd love to know if there's a less inefficient way to do it.

[ryansolid]

Generally onMount when parent context is fully resolved or createEffect if you need it to update with changes after render. That being said these tie into reactive system resolution and have no knowledge of what is actually connected but you can rely on them not executing until the reactive system has applied all DOM updates.

[danieltroger]

Ah sorry, you wrote createEffect and I tested createEffect, dunno why I wrote useEffect. And yeah no, if chrome devtools aren't lying createRenderEffect runs before my elements are attached to the DOM, unfortunately.

I tried createEffect again to make sure and it isn't working. But that's probably because I'm abusing solid in some way? I don't have this standard setup where you have one container that solid owns and you like attach solid to it. I'm just returning an element from my solid code and passing it to vanilla which inserts it into the page. And the element contains the result of signals which happen to be reactive, but probably other parts of solid are broken by me not letting solid own the whole thing?
I think solid never knows about the document, it just knows about nodes relative to the container that it created and that might break something?

If you can confirm that createEffect is indeed supposed to work the way I use solid I can create some sort of simple reproduction for you to debug.

[ryansolid]

Yeah it sounds like aren't using render or createRoot. This breaks effect scheduling and automatic disposal. Which means createEffect wouldn't work.

[danieltroger]

Ah shoot, thanks. I wrapped everything in createRoot(everything) and now createEffect works. Would you mind clarifying again, createEffect runs after updates to the DOM have completed and createRenderEffect before and otherwise they're the same? Does that mean that it's better for performance to use createRenderEffect?

[ryansolid]

createRenderEffect runs as it hits it immediately, so after creation but before insertion into the parent. But this means it gets interleaved with other pure computations like createMemo in terms of execution order. After first run it gets scheduled just like createEffect does to run after all pure computations.

As for performance depends what you are trying to do. For updating the DOM createRenderEffect would be slightly more performant. But most other things in createEffect are more likely to be considered lower priority so having them not be in the middle of rendering is probably better for performance. If you are attempting to only update other reactive signals createComputed is what you want because it runs before all side effects so it wouldn't trigger double rendering. Although if it can be derived createMemo is better since we can trace the dependency graph and ensure it only runs once given an update.

And there you have it, an explanation of when to use the 4 core computation types.

[danieltroger]

Thanks, I keep coming back to this :D