One of the core concepts of React library is state which is responsible for the UI changes.
We have multiple solutions to manage state in the React library like useState, useReducer, useConetxt and redux. Thanks to the vast & growing React community.
This particular blog talks about useReducer & Redux. One is a hook and the other is a state management library. Their definitions, use cases, code samples and when to choose what for efficient state management.
The useReducer hook
useReducer is a hook used for state management. Typically, a React component can have the logic used to determine UI changes.
The state management logic, however, is a different issue that needs to be handled elsewhere.
Otherwise, we wind up with state management
and rendering logic mixed together, which is challenging to comprehend, maintain, and test! with the huge UI components.
This is where useReducer hook comes in handy.
To separate the concerns (rendering and state management) React provides the hook useReducer().
The hook does so by extracting the state management out of the component.
The useReducer(reducer, initialState, init?) hook accept 3 arguments:
- Reducer function
- Initial state
- Initializer function
The hook then returns an array of 2 items:
- Current state
- Dispatch function
const [state, dispatch] = useReducer(reducer, initialArg, init?) Let’s build a counter with the help of the useReducer hook.
following are features of the counter app.
- Increment counter by 1
- Decrement counter by 1
- Reset counter value to initial value
- Increment counter by 5
- Decrement counter by 5
- initialState - It is the value the state is initialized with.
- action object - It is an object that describes how to update the state.
- dispatch - It is a special function that dispatches an action object
- reducer - It is a pure function that accepts 2 parameters: the current state and an action object. Depending on the action object, the reducer function must update the state in an immutable manner, and return the new state.
Redux
On the other hand, Redux offers a comprehensive state management solution by centralising the application’s state in a single store with the help of actions and reducers.
Redux Toolkit simplifies the process by serving as an abstraction over redux. It hides the difficult parts, ensuring a good developer experience.
Let’s build the above counter with the help of Redux Toolkit.
Thumb rules to decide when to use useReducer or Redux
Prefer useReducer if we have:
- Small to medium-sized applications with relatively simple state management needs
- Applications that only need to manage local state within a component or a few components
Prefer Redux Toolkit if we have:
- Large-scale applications with complex state management needs. Redux is more flexible and scalable than useReducer, and it has a larger ecosystem of tools and plugins.
- Applications that need to manage global state across multiple components and/or pages
- Applications that require middleware and advanced tools for debugging and performance optimization
Final thoughts
In general, start with useReducer for simpler projects or when focusing on component-level state.
As our application’s state management requirements become more intricate or if we’re dealing with global state sharing
and complex interactions, consider incorporating Redux for its more comprehensive toolset. Keep in mind that these thumb rules are not strict,
and there might be cases where we find exceptions based on our specific project needs.