Boost Your React App’s Performance: A Step-by-Step Guide

Meet Cardie: Our Sample Project

To make this guide as practical as possible, we’ll work on a simple React application called Cardie. It’s a user profile card that displays information and allows users to change their profession with a button click. You can follow along with the GitHub repo.

The Performance Checklist

Follow these steps to optimize your React app’s performance:

1. 1. Identify Wasted Renders

Toggle on the “highlight updates” option in the React DevTools to identify which components are re-rendered unnecessarily.

import React from 'eact';
import ReactDOM from 'eact-dom';

const App = () => {
  //...
};

ReactDOM.render(, document.getElementById('root'));

1. 1. Extract Frequently Updated Regions into Isolated Components

Break up your component tree to support regions updated frequently. This will help reduce unnecessary re-renders and improve performance.

import React from 'eact';

const ProfileCard = () => {
  //...
};

const ProfileInfo = () => {
  //...
};

const ProfileButton = () => {
  //...
};

1. 1. Use Pure Components When Appropriate

Pure components only re-render if the props or state change. Use React.PureComponent to implement pure components and reduce unnecessary re-renders.

import React, { PureComponent } from 'eact';

class ProfileCard extends PureComponent {
  render() {
    //...
  }
}

1. 1. Avoid Passing New Objects as Props

Avoid passing new objects as props to components, as this can cause unnecessary re-renders. Instead, use a single object reference and update its properties as needed.

import React, { useState } from 'eact';

const App = () => {
  const [profile, setProfile] = useState({
    name: 'John Doe',
    profession: 'Developer',
  });

  const handleProfessionChange = () => {
    setProfile({...profile, profession: 'Engineer' });
  };

  return (

  );
};

1. 1. Use the Production Build

When deploying to production, always use the production build. This will yield bundle-optimized files for production.

1. 1. Employ Code Splitting

Code splitting is a technique that allows you to dynamically send chunks of code to users when they need it. This can improve performance by reducing the initial bundle size.

1. 1. • Use React.lazy to create lazy-loaded components:

import React, { lazy } from 'eact';

const ProfileCard = lazy(() => import('./ProfileCard'));

1. 1. • Use Webpack’s code splitting feature to split your code into chunks:

// webpack.config.js
module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};