Why do Components in For get recreated on any change
Hi, I have this timeline component, and it gets for some reason rerendered on any change to cachedTimeline even if it is data not relevant: https://gist.github.com/MTRNord/26ea26b963e453c2a2812e3f95cba41e#file-timeline-tsx
This means the images in the TextEvent flash on each rerender.
The TextEvent is defined as: https://gist.github.com/MTRNord/26ea26b963e453c2a2812e3f95cba41e#file-textevent-tsx
AuthenticatedImage (which is flashing) is: https://gist.github.com/MTRNord/26ea26b963e453c2a2812e3f95cba41e#file-authenticatedimage-tsx
Basically the only change to the list are these possible cases:
A) A new element is added to the end of the list
B) A new element is added to the end of the list and exactly 1 element is removed from the start (its a 100 element window)
C) The reverse of B (things added to the top of the timeline.)
Most of these changes shouldnt actually cause a full rerender of all images imho. So I wonder how to do this.
3 Replies
I would guess that your fetch function returns new objects at every index after a refetch.
For uses object identity to prevent rerendering. Can you use the reconcile merge function to merge in the loaded data?Or if you use solid-router you could use createAsyncStore which is solved a similar issue for me.
Don’t forget to wrap your jsx which uses the data in a Suspense component.
don't forget
createResource supports store as the storage too
https://github.com/solidjs-community/solid-primitives/tree/main/packages/resource#createdeepsignal