React Performance Optimization with Redux Toolkit Implementation

Introduction

React and Redux are powerful tools for building scalable applications, but as applications grow, performance bottlenecks can emerge. Redux Toolkit (RTK) simplifies Redux setup and reduces boilerplate, but improper implementation can still lead to performance issues. This post explores practical strategies to optimize React applications using Redux Toolkit, ensuring smooth rendering and efficient state management.

We’ll cover key optimizations like memoization, selective re-renders, and efficient state structuring—all while leveraging RTK’s built-in features.

---

1. Leveraging Redux Toolkit’s createSlice and createEntityAdapter

Redux Toolkit’s createSlice and createEntityAdapter provide optimized patterns for state management.

createSlice for Efficient Reducers

createSlice auto-generates action creators and reducers, reducing boilerplate and improving maintainability. It also uses Immer internally, allowing mutable-like syntax while ensuring immutability.

const counterSlice = createSlice({  
  name: 'counter',  
  initialState: { value: 0 },  
  reducers: {  
    increment: (state) => {  
      state.value += 1; // Immer handles immutability  
    },  
  },  
});  

export const { increment } = counterSlice.actions;  
export default counterSlice.reducer;

createEntityAdapter for Normalized State

For lists or collections, createEntityAdapter optimizes CRUD operations and minimizes re-renders by normalizing state.

const usersAdapter = createEntityAdapter();  

const usersSlice = createSlice({  
  name: 'users',  
  initialState: usersAdapter.getInitialState(),  
  reducers: {  
    addUser: usersAdapter.addOne,  
    updateUser: usersAdapter.updateOne,  
  },  
});

This avoids unnecessary re-renders by tracking entities via IDs rather than full object comparisons.

---

2. Optimizing Selectors with createSelector

Reselect’s createSelector (included in RTK) memoizes selectors to prevent redundant computations.

Basic Memoized Selector

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

const selectUsers = (state) => state.users.entities;  

// Memoized selector  
const selectActiveUsers = createSelector(  
  [selectUsers],  
  (users) => Object.values(users).filter(user => user.isActive)  
);

Parameterized Selectors

For dynamic queries, use factory selectors:

const makeSelectUserById = (userId) =>  
  createSelector(  
    [selectUsers],  
    (users) => users[userId]  
  );

This ensures computations only rerun when inputs change.

---

3. Reducing Re-renders with React-Redux Hooks

Improper use of useSelector can trigger excessive re-renders. Follow these best practices:

Use Shallow Equality for Primitive Values

const count = useSelector((state) => state.counter.value, shallowEqual);

Avoid Returning New Objects in useSelector

Bad:

const userData = useSelector((state) => ({  
  name: state.user.name,  
  email: state.user.email,  
})); // New object on every render!

Good:

const name = useSelector((state) => state.user.name);  
const email = useSelector((state) => state.user.email);

Use memo for Components

Wrap React components with React.memo to prevent unnecessary child re-renders:

const UserCard = React.memo(({ user }) => {  
  return <div>{user.name}</div>;  
});

---

4. Structuring State for Performance

Normalize Nested Data

Avoid deeply nested state structures. Instead, flatten data using IDs:

{  
  posts: {  
    ids: ['1', '2'],  
    entities: {  
      '1': { id: '1', title: 'Post 1', author: 'user1' },  
      '2': { id: '2', title: 'Post 2', author: 'user2' },  
    },  
  },  
  users: {  
    ids: ['user1', 'user2'],  
    entities: { /* ... */ },  
  }  
}

Lazy-Load Slices with redux-injectors

For large apps, dynamically inject reducers:

import { useInjectReducer } from 'redux-injectors';  

function UsersFeature() {  
  useInjectReducer({ key: 'users', reducer: usersReducer });  
  // ...  
}

---

Conclusion

Optimizing React-Redux apps with Redux Toolkit involves:

1. Using createSlice and createEntityAdapter for efficient state updates.
2. Memoizing selectors with createSelector.
3. Minimizing re-renders via careful useSelector usage and React.memo.
4. Structuring state in a normalized, flat format.

By adopting these strategies, teams can maintain high performance even as applications scale. Redux Toolkit’s built-in utilities simplify these optimizations, making it easier to write fast, maintainable code.

For further reading, explore RTK’s official docs and advanced patterns like RTK Query for API caching.