Best practices question: Grouping atoms without unneccessary renders

[WilhelmBerggren]

While evaluating different state management libraries for our React Native project, one requirement is to be able to access related atoms through a common hook, without an update to "field B" causing a component which only uses field "A" to re-render.

Working example in Valtio
Non-working example in Jotai

Is there any way around this? I love the Jotai design, but don't want to lose out on keeping things nicely grouped when needed.

Thanks!

[dai-shi]

Valtio optimizes re-renders with state usage (=property access).
Jotai optimizes re-renders with atom usage. So, it doesn't work like you did.

I think you just want to use atoms for each field (it's jotai's best practice), but if you really want to do something like valtio, here's one example:
https://codesandbox.io/s/confident-cookies-22p20?file=/src/JotaiForm.js
Again, this is not a recommendation. It's just to show the power of jotai.

[WilhelmBerggren]

Thanks for the response, I appreciate it!

I guess I'm asking to have my cake and eat it too. Keeping each field in an atom for flexibility but bundling them for ease of use. Sounds like both Jotai and Valtio have their place. Great to have options! 😄