React Performance Optimization Guide

Introduction

Performance is critical for delivering a great user experience in React applications. In this guide, we’ll explore techniques to optimize rendering and reduce unnecessary re-renders.

Using React.memo for Pure Components

React.memo prevents unnecessary re-renders of functional components when props don’t change.

import React, { memo } from "react";

const ExpensiveComponent = memo(({ value }) => {
  console.log("Rendering ExpensiveComponent");
  return <div>{value}</div>;
});

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ExpensiveComponent value="Static" />
    </div>
  );
}

Optimizing with useCallback

Use useCallback to memoize functions and prevent unnecessary re-renders in child components.

import React, { useState, useCallback } from "react";

function Child({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click me</button>;
}

const MemoizedChild = React.memo(Child);

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("Button clicked");
  }, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <MemoizedChild onClick={handleClick} />
    </div>
  );
}

Conclusion

By using React.memo, useCallback, and other optimization techniques, you can significantly improve your React app’s performance. Profile your app with React DevTools to identify bottlenecks!