5 types of React state, and when I use each: 1
5 types of React state, and when I use each:
1. useState - For simple component-local state
2. useReducer - For complex component-local state
3. Zustand - For shareable state used by many components
4. useContext - For compound reusable components
5. Tanstack Query - For server state
Decision Framework:
- "Is this just for one component or practical to pass down to a few components via props?" → Use useState or useReducer
- "Do so many components need this data that passing props is impractical?" → Use Zustand
- "Does a compound component need to share data between parent and child?" → Use useContext
- "Is this data fetched from a server?" → Use Tanstack Query
I could use Zustand for compound reusable components, but Zustand doesn't really provide much benefit in that scenario, and I prefer to avoid needless third-party dependencies on reusable components.