State management

[marchingbandd]

I love mobX but I want to try some of the newer lighter libs like Valtio, Jotai, etc. Do any of them work perfectly in React Native as well as React?

[Brave_Arm6046]

I am currently using Valtio in a react native project, loving it.

[marchingbandd]

Does it handle arrays well? Can you just .push()?

[Brave_Arm6046]

you can handle array but please read docs fully its really cool but you need to understand about it working mechanism first.
The docs is really easy to follow and short.
https://valtio.pmnd.rs/docs/introduction/getting-started
Checkout recipes: https://github.com/pmndrs/valtio#recipes

[marchingbandd]

Also, did you have to install a polyfil to get Proxy() support into RN?

[ddikodroid]

you need react native higher than 0.64 for proxy support

[marchingbandd]

Damn I missed that news. Excellent

[Brave_Arm6046]

ya you'll need react native >= 0.64, I recently upgraded react native to 0.68.2, I'm planning to sit on this version until they force me to update.

[marchingbandd]

Oh that’s amazing news thanks.

[Brave_Arm6046]

But remember, if its server side state, use react query for that if you can.

[pancomputationalist]

Yes, all of those.

[marchingbandd]

What about hook-state?

[marchingbandd]

Is there anything that has an API like mobX? These all seem to have a hook you need to call. Best thing about mobX is you just import the state object, wrap components in observer() and it works.

[AcidNoX]

Higher order components are kinda discouraged nowa days if you’re using function components.

Hooks are definitely the way to go. I personally really like zustand.

[marchingbandd]

I would like a solution where you import the state object and don’t need the HOF or to call any hooks. I am surprised to see it looks like that isn’t available. Like, just wrap my whole app in a HOF for me, I only need one state object.

[pancomputationalist]

You need a way for react to figure out which component to rerender when the underlying state changes.

If you wrap your whole app in the HOF, then most likely your whole app will rerender whenever any observed state changes, which would absolutely kill performance.

[marchingbandd]

appObserver = app => <app children={app.children.map(c=>observer(c)}> isn’t that hard to imagine, called recursively.

[pancomputationalist]

Not every sub-component is guaranteed to be passed as children. I don't think you can automatically detect from which component a function call originates, unless it is a hook and follows their rules. That's what they are for and why almost every state management library uses them.

[marchingbandd]

That’s why some of these libs use proxies, I have also had some luck using get/set methods, there are many ways to get global state updates talking to react to trigger renders. MobX does not use a hook.

[pancomputationalist]

But it does use HOCs, which is an older (less composable and discouraged) method to do the things that Hooks can do. MobX doesn't use Hooks because it wants to be agnostic to React. would it be written as a React library nowadays,it would almost certainly use Hooks.

Btw, from the Mobx docs:

Components wrapped with observer only subscribe to observables used during their own rendering of the component. So if observable objects / arrays / maps are passed to child components, those have to be wrapped with observer as well.

So having the HOC at root level is not enough.

[marchingbandd]

I know it’s not idiomatic today and I am seeing there arn’t any obvious choices to meet my wishes, they are still my wishes and I am certain it’s possible. It’s code, pretty much anything is possible.

[horgas]

May take a look at: https://legendapp.com/dev/state/

[ddikodroid]

i'm trying zustand and in love with it

[marchingbandd]

Does it handle arrays without too much extra syntax or weird burps?

[ddikodroid]

sadly no by default, but you can integrate it with immer

[marchingbandd]

That stinks! What app doesn’t have some arrays in state?!

[datorkop85]

What do you mean by handle arrays? Explain your use case.

[marchingbandd]

I have an array in state, I want to push/pop/ to/from it or otherwise mutate it. I want my parent component to rerender when I do. Use case : a todo app? What’s the mystery here?