⚛️10 reasons to prefer useReducer over useState:
1. Separates reads from writes.
2. Avoids useState pitfalls. You should use functional setState to safely update state using existing state. With useReducer, you can't mess this up.
3. Easy to test. It's a pure function.
#react
4. Typically simplifies useEffect by removing unnecessary dependencies
5. Centralizes state writes, which is often easier to understand
6. Elegantly handles related state (Note you can also use objects with useState to compose data that changes together)
7. Can easily store the entire state tree in localStorage
8. Can pass dispatch down to avoid passing many callback funcs on props
9. Can easily log all actions since they're centralized
10. Moving state management to a separate file makes the component easier to understand.
useReducer decouples update logic from describing what happened. This helps remove unnecessary dependencies from effects and avoids re-running them more often than necessary.
If you find yourself passing multiple callbacks down via props, consider refactoring to useReducer.
Then you can just pass dispatch down instead. 👍
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.