React.memo and Rendering Performance

10 min read

Preventing Unnecessary Re-Renders

By default, when a parent re-renders, all its children re-render too — even if their props haven't changed. Wrapping a component with React.memo makes it skip re-rendering when its props are the same (shallow comparison).

jsx

import { memo, useState } from 'react';

const ExpensiveChart = memo(function ExpensiveChart({ data }) {
  // This component only re-renders when `data` changes
  console.log('Chart rendered');
  return <div>{/* complex chart here */}</div>;
});

function Dashboard() {
  const [tick, setTick] = useState(0);
  const chartData = [1, 2, 3, 4, 5]; // In real code, derive from state/props

  return (
    <>
      <button onClick={() => setTick(t => t + 1)}>Tick: {tick}</button>
      <ExpensiveChart data={chartData} />
    </>
  );
}

The React DevTools Profiler tab is the best tool for identifying unnecessary re-renders. Record an interaction, look for components highlighted in orange/red, and only then apply React.memo.

Ready to test yourself?

Practice React— quiz & coding exercises