3 ms·

If you want a really frictionless state management library for React, please try out my library https://github.com/baron816/use-structure https://github.com/bar

If you want a really frictionless state management library for React, please try out my library https://github.com/baron816/use-structure https://github.com/baron816/use-structure It lets you make state updates using native JavaScript mutation APIs. It uses Proxies to convert those mutable updates to be immutable so that your component updates correctly. This will work: ... const arr = useStructure([]); ... <button onClick={() => arr.push(1, 2, 3) }>Add value</button> But you could use deeply nested arrays/objects/Maps/Sets. Or you could use your own class with its “mutating” methods. If you know basic JS, you should be able to use it without worries.

wereHamster 6y ago
So… like immer / use-immer?
- raoulj 6y ago
  It doesn't look like it (from what I gather about `use-immer`). What's being suggested is updating React state via a mutable API on the data value itself. `use-immer` wraps the useState/useReducer functional updaters with a call to immer, whereas `use-structure` suggests mutating the data, which is what every React-beginner instinctively tries to do when they first get started with React. Same idea of using Proxies as immer though. This is really interesting! Great idea.
splendidHaiku 6y ago
I thought about changing my slightly verbose react state updates to immerjs but your lib looks even simpler. I dont think it can be simplified any further, really great, thank you.
czynskee 6y ago
This looks pretty cool, I love your use of proxies. Along with that though, I'm curious if you've done any performance testing comparisons? This could very well be out of date now but at some point I read that accessing properties on a proxied object are like 600 times slower than a regular JS object. I wonder if that could be a bottleneck if you're doing state updates on, say, scroll events or something. I've been able to notice performance hiccups in these cases even just using React state. Of course debouncing usually helps.
- baron816 6y ago
  No, haven’t done any perf testing. I’m pretty sure Vue is moving to use Poxies, so I think it’s somewhat safe. You can still use useState where you need it.

wereHamster 6y ago

So… like immer / use-immer?

raoulj 6y ago
It doesn't look like it (from what I gather about `use-immer`). What's being suggested is updating React state via a mutable API on the data value itself. `use-immer` wraps the useState/useReducer functional updaters with a call to immer, whereas `use-structure` suggests mutating the data, which is what every React-beginner instinctively tries to do when they first get started with React. Same idea of using Proxies as immer though. This is really interesting! Great idea.

splendidHaiku 6y ago

I thought about changing my slightly verbose react state updates to immerjs but your lib looks even simpler. I dont think it can be simplified any further, really great, thank you.

czynskee 6y ago

This looks pretty cool, I love your use of proxies. Along with that though, I'm curious if you've done any performance testing comparisons? This could very well be out of date now but at some point I read that accessing properties on a proxied object are like 600 times slower than a regular JS object. I wonder if that could be a bottleneck if you're doing state updates on, say, scroll events or something. I've been able to notice performance hiccups in these cases even just using React state. Of course debouncing usually helps.

baron816 6y ago
No, haven’t done any perf testing. I’m pretty sure Vue is moving to use Poxies, so I think it’s somewhat safe. You can still use useState where you need it.