For a smooth user experience, fast rendering in React applications is crucial. Using React-Redux can sometimes lead to performance issues due to unnecessary re-renders of connected components. This article will explore several methods to avoid the rendering of these components. By implementing these techniques, you can enhance the efficiency and performance of your React-Redux applications, ensuring they run smoothly and responsively.

These are the following approaches to optimize the rendering of connected components in React-Redux:

Memoization with ‘React.memo’

‘React.memo’ is a HOC(high-order component) used to memoize the functional components so that re-render may be blocked for them if props are same. Using ‘React.memo’, you can make sure that a functional component is rendered only when its props change. This lowers the rendering overhead for components with no changed props.

Syntax:

const MemoizedComponent = React.memo(MyComponent);

Using ‘useSelector’ and ‘useDispatch’ Hooks

The ‘useSelector’ hook helps you extracts data from the Redux store, whereas ‘useDispatch’ allows you to dispatch actions. This can enable to subscribe only when parts of the state changes, so that unnecessary re-renders are minimized.

Syntax:

import { useSelector, useDispatch } from 'react-redux';
const MyComponent = () => {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();
  
  // component logic
};

Splitting State Slices

Dividing the state into smaller, more manageable views can improve performance by decreasing the number of components that need to re-render whenever a portion of the state is changed. By splitting the state, you can separate the state changes impact such that only the necessary components are re-render.

Syntax:

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userReducer';

const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

Selector Optimization with ‘reselect’

The ‘reselect’ library is useful for creating memoized selectors that recalculate only when the values of the inputs change. Memoized selectors minimize unnecessary computations done thus speeding up component rendering.

Syntax:

import { createSelector } form 'reselect';
const selectUser = state => state.user;
const selectUserName = createSelector(
  [selectUser],
  user => user.name
);

Avoiding Anonymous Functions and objects in Props

When we pass anonymous functions or objects to other components using props in React, this can potentially lead to some unnecessary re-renders because each new reference is treated as a different entity each time it changes its host component’s state. This is not so with named functions and constants whose values remain the same even after their references are updated in other parts of code.

Syntax:

// Avoid this
<MyComponent onClick={() => doSomething()} />

// Use this
const handleClick = () => doSomething();
<MyComponent onClick={handleClick} />

Step to Optimize the re-render in react-redux connected component

Step 1: Create React App

npx create-react-app redux-performance
cd redux-performance

Step 2: Install Required Modules

npm install  @reduxjs/toolkit react-redux reselect

Project Structure:

Folder Structure

Dependencies:

dependencies: {
    "@reduxjs/toolkit": "^2.2.6",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-redux": "^9.1.2",
    "react-scripts": "5.0.1",
    "redux": "^5.0.1",
    "reselect": "^5.1.1",
    "web-vitals": "^2.1.4"
  }

Example: Set up a Redux store, create actions and reducers for ‘prop1’ and ‘prop2’, connect a memoized component to display them, and wrap it in the Redux provider in the main app.

// Action.js
export const updateProp1 = (payload) => ({
    type: 'UPDATE_PROP1',
    payload
  });
  
  export const updateProp2 = (payload) => ({
    type: 'UPDATE_PROP2',
    payload
  });
  

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <Provider store={store}>
      <div>
        <h1>My React-Redux App</h1>
        <MyComponent />
      </div>
    </Provider>
  );
};

export default App;

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM
  .createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// MyComponent.js
import React from 'react';
import { connect } from 'react-redux';
import { updateProp1, updateProp2 } from './Action';

const MyComponent = React.memo(({ prop1,
    prop2, updateProp1, updateProp2 }) => {
    return (
        <div>
            <div>
                {prop1} - {prop2}
            </div>
            <button onClick={() =>
                updateProp1('Hi')}>
                Update Prop1</button>
            <button onClick={() =>
                updateProp2('React')}>
                Update Prop2</button>
        </div>
    );
});

const mapStateToProps = (state) => ({
    prop1: state.prop1,
    prop2: state.prop2,
});

const mapDispatchToProps = {
    updateProp1,
    updateProp2
};

export default connect(mapStateToProps,
    mapDispatchToProps)(MyComponent);

// store.js
import { configureStore } from '@reduxjs/toolkit';

const initialState = {
    prop1: 'Hello',
    prop2: 'World'
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'UPDATE_PROP1':
            return {
                ...state,
                prop1: action.payload
            };
        case 'UPDATE_PROP2':
            return {
                ...state,
                prop2: action.payload
            };
        default:
            return state;
    }
};

const store = configureStore({ reducer });

export default store;

Output: Below is a demonstration showing the initial rendered ‘MyComponent’ displaying ‘prop1’ and ‘prop2’ values from the Redux store, and how the component re-renders when these values are changed. If the values of ‘prop1’ and ‘prop2’ in the Redux store do not change, ‘MyComponent’ will not re-render, demonstrating the efficiency of using ‘React.memo’.