Re:Overmind.js – Frictionless State Management
by wereHamster on Monday October 12, 2020 @01:23AM
(#24751634)
So… like immer / use-immer?
Re:Overmind.js – Frictionless State Management
by raoulj on Monday October 12, 2020 @07:34AM
(#24753367)
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.
Re:Overmind.js – Frictionless State Management
by czynskee on Monday October 12, 2020 @12:59PM
(#24756545)
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.
Re:Overmind.js – Frictionless State Management
by baron816 on Monday October 12, 2020 @01:44PM
(#24757117)
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.
Re:Overmind.js – Frictionless State Management
by splendidHaiku on Monday October 12, 2020 @09:23AM
(#24754091)
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.
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.