Cleanup function
https://stackblitz.com/edit/solidjs-templates-unzazc?file=src%2FuseFloating.tsx
1. When you hover over the box, you'll see three console logs with the message "Update."
2. If you scroll while your mouse is over the box, you'll notice that it's reacting and automatically updating. This is because the autoUpdate function with the elementResize option returns a ResizeObserver.
3. When you move the mouse away from the box and try to scroll the page, you'll see that there are no more logs. This indicates that the cleanup has occurred.
The question is: Why does the update function get invoked three times? I believe the issue might be in the second createEffect. I tried to implement cleanup at the first level, but it didn't work well. Is there a way to improve this behavior? I treid to make cleanup fn for days, but I just don't understand where is the problem now. Thanks!
16 Replies
I'm not really familiar with
floating-ui but from what I can see, autoUpdate() calls the update funtion 3 times by itself if you do nothing.
If you immediatly call the clean up function, it is only called once.Yes, I know, but the problem is that I cannot cleanup fn right away. I tried to copy Vue library, but let variable is not reactive. So I just don't know what to do.
What’s the problem of calling it 3x times?
It shouldn't work that way :D. And it is bad for old devices.
pretty confusing code... what is the goal of @floating-ui's
autoUpdate?floating-ui is pretty confusing alright. Popper is a bit more "exactly what I need" package, Floating UI is too bare bones, it's "here, you manage it" package
https://floating-ui.com/docs/autoupdate you can read more about it here or hover over its options.
autoUpdate | Floating UI
A JavaScript library to position floating elements and create interactions for them.
I don't think it is confusing. React library for floating-ui are 😄
I think it has something to do with that
autoUpdate call, if you simply call update inside whileElementsMounted it is called once.
if I do const cl = autoUpdate(refrence, floating, update, { elementResize: false }) it is called once too.
so it has something to do with the resizing of refrence/floatNo way
Well, in Vue its called two times ;/
and updates almost 2 times more compared to Solid.
I think that there's no way to optimize it.
Is there's a way to make cleanup() fn reactive at the top level somehow? Just like that. Or it is better to tie it with isOpen() in createEffect? What do you think?
it runs 3 times with just dom nodes
https://playground.solidjs.com/anonymous/e5871915-7144-4193-8bdb-4c90ea278a70
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
though you might wanna look at stores for granularly updating along the data
And I'll just throw this in:
There's https://kobalte.dev
A great headless ui library providing unstyled components that do exactly what floating-ui does. But everything is done the solid way.
If you want more default styling there's https://www.solid-ui.com/docs/components/ which is build on top of kobalte.dev using tailwind (it's like shadcn but for solidjs).
solid-ui
Beautifully designed components built with Kobalte and Tailwind CSS.