Filter and <For each />
Just a question, is there anything wrong with using
.filter with For each={} />
Like:
I'm wondering if this causes issues when toasts() is an array that sort of reorders.
Like if toasts() were a queue that removes the first element every few seconds, will SolidJS know to reuse the 2nd element in place of the removed 1st element?
Visually:
[1st Element, 2nd Element, 3rd Element]
⬇️
[2nd Element, 3rd Element]
------
Another is if 2nd Element just changes something within it like:
[2nd Element.loading, 3rd Element]
⬇️
[2nd Element.success, 3rd Element]
In this case, will SolidJS unmount the 2nd element, and then remount it? (when filter is involved)14 Replies
As far as I can tell from your example
.filter() wouldn't change referential stability of the toast items; so you should be fine.
will SolidJS know to reuse the 2nd element in place of the removed 1st element?Given that you are using
For Solid will drop the 1st element but the 2nd toast item will remain with the already existing 2nd element.
Note that Index is an optimization when your item simply projects to a text node. In that case it's faster to swap around the text nodes and just leave the wrapping elements in place.If you want to make sure you can always use a utility like this to ensure that reality and your expectations meet.
Just adjust the selectors in here then use it wherever a pertinent change is being made.
GitHub
solid-start-sse-chat/src/lib/row-monitor.ts at d2b9070f956947c940dc...
Basic Chat demonstration with server-sent events (SSE) - peerreynders/solid-start-sse-chat
GitHub
solid-start-sse-chat/src/components/history-context/index.tsx at d2...
Basic Chat demonstration with server-sent events (SSE) - peerreynders/solid-start-sse-chat
Thanks for the useful info @peerreynders ! Will check these out.
By the way @peerreynders, reason why I'm asking this is because of this problem I'm having:
(it kind of unmounts and remounts the component which looks weird)
I have a feeling it's because of "keys". In React, you can pass keys to the component. I can't do this in Solid.
I was basing on this discussion: https://github.com/solidjs/solid/discussions/366
And kind of found a workaround to add explicit keys.
GitHub
How to specify key in each？ · solidjs solid · Discussion #366
In react we can set key in list to optimize dom rendering. In solid I didn't found the same pattern to decare which component should be kept and which should be new.
I noticed it works a lot better when I implement this: codesandbox.io/p/sandbox/explicit-keys-with-a-list-of-keys-clmm7?file=%2findex.js
The concept is, using createMemo inside the <For each={ids}> render prop and then finding the element.
But there's definitely still a problem with this approach though. (Notice how weird it squeezes whenever it changes states ^)
I've read about it from the discussion I sent, but not really. I don't understand it haha
I'll look into it. Should I be using
createStore for this?I don't understand your particular use case in depth; but I always use reconcile when I need to patch an entire area of a store.
That way it can figure out which parts inside the store actually have to change.
I was going by your codesandbox which uses a store.
Interesting. I think I get the gist of it. I'll read up on this and try implementing that right now. Really appreciate the help @peerreynders , thank you!
Yeah I'm starting to see how
createStore would be better for an array of objects. I'm currently using createSignal here.I don't know what is going on in the bowels of your code.
The issue with React code tends to be that in pursuit of faux FP it tends to update data that doesn't need to be updated because in their eyes it doesn't matter because "the whole thing has to re-render anyway".
That tune changed when when it came to useSyncExternalStore; all of a sudden referential stability was a thing.
In SolidJS:
- referential stability communicates that nothing has changed
- referential volatility communicates change.
GitHub
useMutableSource → useSyncExternalStore · reactwg react-18 · Discus...
Since experimental useMutableSource API was added, we’ve made changes to our overall concurrent rendering model that have led us to reconsider its design. Members of this Working Group have also re...
Okay I tried reconcile and it's kind of magic. No idea how it worked. But I'm a fan now. It was definitely complex at first but it's kind of clicking when I see these results haha
You're essentially diffing state (rather than DOM)
.filter works with it as well. I can't thank you enough!
Last thing I gotta fix is this weird spazzing out whenever I hover.
Reconcile WORKS!!!! @peerreynders your advice is godsent thank you.
What I learned here is I have to throw out the usual ...spread operator thing I do in React.
And use more of Solid's utilities for createStore. I just realized how powerful it is.
All the bugs are fixed 🙏✨ @wobsorianoThe next step is to cluster data in the way it is observed. That's when you realize that often a signal is actually enough.