How to prevent re-creation of a component inside <For>?
Hi everyone. To illustrate my issue, I created a very minimal version of the application that I have. To see the problem I am facing, just click on any of the links in the rendered page and then click on the button that appears. You will notice that the button will disappear (because the component gets re-created and the state is reset). What would be the best approach to prevent this from happening?
https://codesandbox.io/p/devbox/r5k78c
3 Replies
The core problem is that the object identity of the project is changing. I believe if you change
generateNewProject
to modify the matching object in-place instead of using {...node, url: ...}
(but still build a brand new array via map
so the signal changes overall), it will work.
A cleaner approach might be to use a store instead of a signal. Then you can modify one piece of the project without the identity of the project object changing.You could also use
<Key>
/keyArray
from https://primitives.solidjs.community/package/keyed/
or maybe even <Index>
Oh I didn't know about
Keyed
. Thank you, will look into that now
I was actually thinking about using a store + reconcile for more granularity but at the same time I was trying to avoid quite a bit of refactor 😄 but I guess there's no way around it