Add plugin to optimise rerender of arrays/objects when keys are added/removed

Hi,

first of all thanks for this awesome library!

I intend to use this with a pretty big nested array. Updating an existing element only triggers re-renders on this element and it’s children. Nice! But when adding a new element all the sibling elements are re-rendering even though they did not change. This can also be seen in the demo for complex tree structure. I looked into the mutate plugin but it doesn’t seem to get me where I want to go either.

Is there a way to only trigger re-renders for the one element that gets added, or for the element that gets removed and it’s the following siblings? Can nested.map somehow be memoized?

Edit: Looks like I just found the solution. Using reacts own memo function seems to do the trick. If anybody is interested I can create a small example. If not this question can be removed

[avkonst]

What you are doing does not scale very well. Hookstate does the job (figuring out if it should rerender or not) on any state update for EACH hook placed. You are placing a hook for each element in the arrays. This is not the same as scoped state hooks. scoped state hooks scale to arrays with millions of elements (I checked it). I will keep this ticket as a reference to come up with the prlugin mentioned above, but it will take a while as there are other more important tasks at this stage.

[avkonst]

If you sibling component is wrapped by React.memo full array rendering is still taking place, it just becomes quicker for sibling components. You need to be careful: the second parameter for memo function should be proper chain of properties being compared. If your array is array of strings, it is fine. If it is an array of objects, you might need to do equality check of it’s properties which are used inside of the memoized component. You can not pass StateLink variable to the second argument of memo.