Redux vs Zustand for state management in React app

"A JS library for predictable and maintainable global state management" - Redux

"A small, fast, and scalable bearbones state management solution" - Zustand

Let us understand the concept of state management in React application first.

State management in React refers to the way data is managed and updated within a React application. React components can have their own local state (component state) which allows them to manage and update data without directly affecting other components.

Let us see practically how to implement a simple state management application with both Redux and Zustand individually to understand the differences .

Counter state with Redux(Centralised state store)

1. Create store with configureStore() function

2. Create state slice with createSlice() function and add

{ counter1:100,counter2:200} as initial state

3. Add this reducer to redux store

4. Provide the redux store to Root/Parent component.

Now, this store is accessible by every component of the application.

5. Consume this store in component.

Note-Never access whole state(Both in Redux and in Zustand) in a Component. It leads to multiple re-renders. i.e. If a component needs counter1, then select only counter1 instead of the entire state which includes counter2 too. For example , if you write

let {counter1}=useSelector(state=>state) <- This is wrong

Then you can see this warning in console.

This warning is self explanatory . That selector will re-render a component either counter1 or counter2 is changed.

Let us create two components where one can consume counter1 & other counter2

Now, when counter1 is changed then , only TestReduxCounter1.jsx will be re-rendered. In the same way, for counter2 it is TestReduxCounter2.jsx.

In this way, the state management can be implemented using Redux in React application

Counter state with Zustand (Hook based state management)

1. Create store using create() function of Zustand

It's like a custom hook, so that name should start with "use".

2. Select counter1 & changeCounter1 function in a component & counter2 & changeCounter2 in another component.

That's it.

Note- I have added console statement in every component to check re-rendering

Observations

Redux:

1. Centralised State Store: Redux provides a centralized store to manage the entire state of your application. It follows a single source of truth principle, where the entire application state is stored in a single immutable object tree
2. Immutable Updates: Redux encourages immutable updates to the state. This ensures that state changes are predictable and helps in debugging and maintaining the application.
3. Predictable State Changes: Redux enforces a strict unidirectional data flow and provides tools to monitor and log state changes, which helps in debugging and understanding application behavior.
4. Community and Ecosystem: Redux has a large and active community with extensive documentation, tutorials, and middleware support. It's widely adopted in large-scale applications and complex state management scenarios.

Zustand

1. Hook-based State Management: Zustand simplifies state management by eliminating the need for actions and reducers. State updates are handled directly within components using hooks.
2. Immutability and Updates: Zustand encourages immutable updates using libraries like immer. This helps in maintaining a clean state update mechanism within components.
3. Component-level State: Zustand encourages local state management within components. Each Zustand store can be scoped to a specific component or a group of related components.
4. Scalability: While Zustand is suitable for small to medium-sized applications, its simplicity may make it less suitable for very large applications requiring complex state management patterns or extensive middleware support.

Choosing Between Redux and Zustand

• Redux is ideal for large-scale applications where complex state management, time-travel debugging, and extensive middleware support are required.
• Zustand is well-suited for smaller to medium-sized applications or components within larger applications, offering simplicity, performance optimisations, and direct integration with React hooks.

Kindly let me know if i miss any valid point in this.