How to Optimize Redux Store in React

Managing state efficiently in large-scale React applications is crucial for maintaining high performance and a smooth user experience. This article explores key strategies to optimize your Redux store, including normalizing state structure, using memoized selectors, minimizing component re-renders with granular selectors, and leveraging Redux Toolkit’s built-in tools to ensure a fast, responsive interface.

1. Normalize the State Structure

Storing deeply nested JSON data in your Redux store leads to complex reducer logic and unnecessary component re-renders. When a deeply nested object is updated, React components subscribed to parent objects may re-render even if their specific data didn’t change.

• Flat State: Keep your store normalized by treating it like a relational database. Store items in an object indexed by their IDs, and keep an array of IDs to track order.
• Benefits: Normalization simplifies update logic, reduces the state payload size, and makes it easy to look up items in \(O(1)\) time. You can use libraries like normalizr to transform nested API responses before saving them to the store.

2. Use Memoized Selectors with Reselect

Whenever the Redux store updates, every active useSelector hook runs its selection logic. If your selector performs expensive computations (like filtering or mapping arrays), it can cause severe performance bottlenecks.

• Implementation: Use createSelector from Redux Toolkit (which wraps the Reselect library).
• How it Works: Memoized selectors cache their inputs and outputs. If the relevant slice of the state has not changed, the selector immediately returns the cached result instead of recalculating it, saving CPU cycles.

import { createSelector } from '@reduxjs/toolkit';

const selectUsers = (state) => state.users.items;
const selectFilter = (state) => state.users.filter;

// This selector only recalculates when users or filter changes
export const selectActiveUsers = createSelector(
  [selectUsers, selectFilter],
  (users, filter) => users.filter(user => user.status === filter)
);

3. Avoid Unnecessary Re-renders with Granular Selectors

React components re-render whenever the value returned by useSelector changes reference. If your selector returns a new object on every run, the component will re-render on every dispatch, even if the actual data hasn’t changed.

• Select Primitive Values: Instead of selecting an entire object, select only the specific primitive values (strings, numbers, booleans) your component needs.
• Use shallowEqual: If you must return a new object or array from a selector, pass shallowEqual from react-redux as the second argument to useSelector. This performs a shallow comparison of the object properties instead of a strict reference check.

import { useSelector, shallowEqual } from 'react-redux';

// Optimizing by comparing object properties shallowly
const userSettings = useSelector((state) => state.user.settings, shallowEqual);

4. Keep Derived State Out of the Store

Do not store data in Redux that can be calculated from existing state. Storing duplicate or derived state increases the risk of data desynchronization and unnecessary memory usage.

• Rule of Thumb: If a value can be computed using a combination of props and current state, calculate it on the fly using a memoized selector rather than dispatching an action to save it in the Redux store.

5. Use Redux Toolkit (RTK)

Redux Toolkit is the official, opinionated way to write Redux logic. It includes built-in optimizations that prevent common performance mistakes:

• Immer Integration: RTK uses Immer under the hood, allowing you to write “mutative” update logic that is safely transformed into efficient immutable updates.
• RTK Query: For server state management, RTK Query automatically handles caching, de-duplication of requests, and garbage collection of unused cache data, drastically reducing manual boilerplate and optimizing memory usage.