Can I bind only relevant data to a component?

[johnsonthedev]

Hi,

I am looking for a better way to work with nested data and proxies seems to be a good fit. I was wondering if I can bind nested data to a component and stop them to re-render if nothing changed.

E.g. in below example all components get updated when I press a button. Can I stop this ?

https://codesandbox.io/s/wandering-monad-15t9n?file=/src/App.js:375-448

THX!

[dai-shi]

First things first, you need to use the snapshot. const snap = useSnapshot(store)

Dealing with the array is kind of hard. Best is:

• use React.memo
• and only pass primitive values
• useSnapshot in each child component if you don't want to get all primitive values in props

For example: https://codesandbox.io/s/angry-bouman-belio?file=/src/App.js

[thelinuxlich]

I don't see the difference in the demo between using React.memo or not

[dai-shi]

Very good point.

https://codesandbox.io/s/nameless-leaf-qcmys
This is the one without memo.
memo will only be nice-to-have when we add/remove items in an array.

https://codesandbox.io/s/misty-currying-gftzv
This is the one with memo. We don't useSnapshot in children.

cc @johnson444

[johnsonthedev]

thanks @dai-shi. I tested it today and it works perfectly - even with nested arrays . It's such a relief compared to the useState hell!!

[thelinuxlich]

We should have a cookbook section pointing to these best practices

[dai-shi]

I just enabled the wiki page of this repo. Please feel free to edit it. Once there are some meaningful contents, let's have links from readme.md.