Wonder why Vue didnt sweep the frontend world, I cringe seeing React code like below. I was using MobX in 2016 for a side project with React. I could avoid "
replace man with man with bandaid in wallet" code and components will update if and only if their props update. But their objects were non native and errors froze the entire app (later versions fixed these). Vue supported all this natively.
```
const state = {
...baseState,
key0: {
...baseState.key0,
value: i,
},
};
```
For a couple of years I've been using Zustand and Immer for state + actions + select/subscribe to update views. I'm curious to try Mutative, it looks like a drop-in replacement for Immer (except the main function is called "create" instead of "produce"). I wonder what the secret sauce is to make it so much faster, and if there are any downsides to it.
Thank you, I think I just needed to read more carefully.
Compared to the spread operation ("naive handcrafted reducer"):
> [Mutative] focuses on shallow copy optimization, more complete lazy drafts, finalization process optimization, and more.
Compared to Immer:
> Immer relies on auto-freeze to be enabled, if auto-freeze is disabled, Immer will have a huge performance drop and Mutative will have a huge performance lead, especially with large data structures.
Oh, I didn't notice this: Full compliance with JSON Patch specification. Interesting!
> Immer must have auto-freeze enabled by default(Performance will be worse if auto-freeze is disabled), such immutable state with Immer is not common. In scenarios such as cross-processing, remote data transfer, etc., we have to constantly freeze these immutable data.
> There are more parts that could be improved, such as better type inference, non-intrusive markup, support for more types of immutability, Safer immutability, more edge cases, and so on.
Also compared to native spread operation(naive handcrafted reducer):
> The spread operation has performance pitfalls...
> And Mutative optimization focus on shallow copy optimization, more complete lazy drafts, finalization process optimization, and more.
``` const state = { ...baseState, key0: { ...baseState.key0, value: i, }, }; ```