Problem: Choosing a React state library is hard
Problem: Choosing a React state library is hard.
Solution: Consider the tradeoffs.
Here are 6 key tradeoffs, with examples:
1. General vs Specific
General: Redux, Zustand, Jotai.
Specific: React Query, Apollo. These are specifically designed for handling data fetched via HTTP.
2. Mutable vs Immutable
Immutable: Redux, Zustand. Like plain React, you must provide an updated copy of state instead of mutating state.
Mutable: Valtio, React Query. You can directly mutate state/cache.
3. External vs Internal
External: Redux, Zustand, Jotai. State can be accessed outside React.
Internal: Some state solutions are only available inside React components via hooks. React's built-in context is an example.
4. Auto vs manual render optimization
Auto: Mobx and Valtio automatically optimize renders.
Manual: Many other tools like Redux and Zustand require manual render optimization (for instance, via selectors).
5. One store vs multiple
One store: Redux (typically), React Query.
Multiple stores: Zustand, Jotai, Valtio.
6. Protected vs unprotected
Protected: Redux, Zustand. You expose a "coarse grained" API that decides how it can be changed.
Unprotected: Jotai, Valtio. Callers can change the state in any way.
I explore these tradeoffs and show how to implement multiple state approaches in "React Third-Party State Management".
Just published on Pluralsight: https://app.pluralsight.com/profile/author/cory-house
