About tracking re-renders and Store usage
Hey there folks, how would one go about tracking the reasons of a re-render? Is there anything similar to React's why-did-you-render?
1) There's a bug in my app that re-renders the whole application (like does a full refresh / remounts the page) when a store field changes. I just cannot get to the bottom of it. What would you do about this?
2) My main suspect is my global Store instance which is outside the component hierarchy. I just declared it as a global export in a module. The thing is it works perfectly well in most cases except this one field - when I modify that field the whole app is weirdly reloaded. Is it fine to use Store/Signal instances declared globally outside the component hierarchy like that or should I just stick it inside a Context and inject that into my component tree?
(This is a Solid app with vite, all latest versions.)
Any tips or directions welcome, TIA!
2 Replies
You could be hitting a suspense boundary if you're making use of resources, a show or ternary expression being triggered when you don't want it to, or maybe some error in how things are being rendered
OMG 🤦♂️ it turns out the page refresh is coming from a <button> under a <form> which just needs a type="button" attribute to prevent that default submit action.
10+ hours down the line playing with all sorts of experiments on reactivity!