props and createMemo
I'm confused. I thought I understood perfectly Solid, and today I stumbled upon a performance issue that I don't understand.
I've created a very small and silly example to reproduce it.
https://playground.solidjs.com/anonymous/21929a27-2909-461b-87fe-141c7401f23c
I've inlined the items instead of using
<For> because I wanted to be sure the example is as simple as possible, but basically, imagine that createMemo is expensive, and the number of items is something on the hundreds. What I expect is that when count() changes, only 2 createMemo should re-compute, since the rest will have the same value false. But instead, all of them re-compute all the time.
What's wrong? How would you optimize this?Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
2 Replies
https://docs.solidjs.com/reference/secondary-primitives/create-selector
all your memos are subscribed to count()
when count() changes all the subscribers runs ( the memo with the expensive computation)
to make sure you only trigger the relevant items
you need a different pattern.
for example the
createSelector shown above
or guard it in code based on your logic like here
https://playground.solidjs.com/anonymous/043f68e5-1091-40f3-86fa-65d5ee87ea3d
and this is what the selector helps you avoid, if you want to understand what it does
https://playground.solidjs.com/anonymous/daf33676-f7f3-4c6c-b737-4776fbe8fc8ahmm... I see. Thanks for the answer! Will try and report back 🙂
works! nice