Having trouble implementing a stack of views because of the lifecycle of <Dynamic>
For my site, I have implemented a stack of views, sort of like on iOS where you can push and pop views from a shared navigation stack. But I'm having issues with how <Dynamic> renders. It's easier to show an example, so I made this minimal repro in the playground: https://playground.solidjs.com/anonymous/90d6fbd1-6114-4fb8-aa60-5c6ac104dcd3
The problem can be seen by first adding a view, then hitting "remove myself" on that view. The console log should help make it clear what the problem is too. There's no longer a view on the stack, so I'd assume the <Dynamic> component would just not render again, but what actually happens is it renders out of sync a bit, where the component renders again but the props are undefined during the last render.
This has led to a footgun where I have to be careful in a view to not do anything after popping that view, and have to be overly-careful with checking for undefined props in
createEffect calls, since it could be called in this weird situation where <Dynamic> is rendering one last time with a defined view but not the props associated with it.
Any help would be much appreciated!Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
8 Replies
not sure I completely understand the problem, but I think maybe show's callback-mode could be the solution: https://playground.solidjs.com/anonymous/8fed05fb-56f9-4537-9d24-822d0077ae16
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
yeah I went down a similar route, that solves the undefined props problem, but leaves another problem (which is present with the non-Show approach too), where when you add a second view, the first view gets called with the new view's props one time
so it is strictly better I guess, but yeah still not in lock-step with the store
one sec I'll push up a playground that highlights that with a slightly more realistic example
Ah okay so here's the difference. If there's no view below the current view, the Show callback approach works fine, but when there's a view below, there's the same issue: https://playground.solidjs.com/anonymous/3928f3ef-8155-4e14-beb0-16ed515a916b
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
so add a couple views, then hit "remove myself", and the console log will show the same issue
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
niceee, yeah that seems like the ticket
looked up the docs about what's happening with
keyed too, seems like exactly what I need
ty 🙏ur welcome!
think one of those very few occasions where keyed actually is useful
Just tested on my site, works perfectly afaict 🎉 been a pain point and source of weird bugs for a long time, thank you