C
React list
Previous19 / 22Next
React/Optimization/Lesson 19

React.memo

30 min·theory
This chapter
2/2
JavaScript

React.memo

💡 Why should you learn this?

🎯 Prevents unnecessary re-renders, making your app faster.
💼 The performance difference is dramatic when rendering thousands of items in a list.
⚡ It is a go-to answer for performance optimization questions in technical interviews.
🔗 It is the first tool to reach for when resolving performance issues in production.
🏢 실무에서는
In production, React.memo is used on frequently updated screens such as search result lists, infinite scroll feeds, and real-time notification panels. For example, in a search experience similar to Naver Search, each result item can be wrapped in React.memo so that the entire result list does not re-render every time the user types a character.

What is React.memo?

React.memo

A higher-order component (HOC) that skips re-rendering when props have not changed.

When to use it

  • ▸When a parent re-renders frequently but child props remain unchanged
  • ▸Components with high rendering cost
  • ▸Individual items in a list

Changes in React 19

The React Compiler applies memo automatically, so manual usage is becoming less common.

This concept is fundamental to React component development. Understand React's declarative UI paradigm and clearly distinguish the difference between props and state. A component should behave like a pure function — always returning the same output (JSX) for a given input (props).

💻 React.memo Practice 
import { memo, useState, useCallback } from "react";

// 1. Basic memo
const ExpensiveChart = memo(function ExpensiveChart({ data }: { data: number[] }) {
  console.log("Chart rendered!"); // Only output when props change
  return (
    <div className="h-64 bg-gray-800 rounded p-4">
      {data.map((v, i) => (
        <div key={i} className="inline-block bg-green-500 mx-0.5"
          style={{ height: `${v}%`, width: 20 }} />
      ))}
    </div>
  );
});

// 2. Custom comparison function
const UserCard = memo(
  function UserCard({ user }: { user: { id: string; name: string; avatar: string } }) {
    return <div>{user.name}</div>;
  },
  (prevProps, nextProps) => {
    return prevProps.user.id === nextProps.user.id; // Compare only ID
  }
);

// 3. Parent component
function Dashboard() {
  const [count, setCount] = useState(0);
  const [chartData] = useState([20, 40, 60, 80, 50, 30, 70]);

  // Stabilize function reference with useCallback
  const handleChartClick = useCallback(() => {
    console.log("Chart clicked");
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
      {/* Chart does not re-render when count changes */}
      <ExpensiveChart data={chartData} />
    </div>
  );
}

💡 💡 React.memo Tips

  • ▸React 19: Compiler handles it automatically — reduce manual memo usage
  • ▸Object/Array Props: Use useMemo to stabilize references
  • ▸Callback Props: Use useCallback to stabilize function references
  • ▸Measurement: Verify real-world impact with React DevTools Profiler

This concept is fundamental to React component development. Understand React's declarative UI paradigm and clearly distinguish the difference between props and state. A component should behave like a pure function — always returning the same output (JSX) for a given input (props).

⚛️ React Patterns — React.memo

Learn how React.memo is used in React step by step, with code examples.
1 🧩 1. When to use React.memo
Situations where this feature is needed.
↓
2 💻 2. Writing the code
Basic usage of React.memo.
↓
3 🎨 3. Rendering result
What the user sees on screen.
↓
4 💡 4. Practical tips
Common pitfalls and best practices.

🎮 React.memo — Step-by-Step Understanding

Click each step to read the content and track your progress with the 'Got it' button.
🖥️ Result — rendered React component
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — see the result first, then edit the code yourself.

Check Quiz

How does React.memo prevent re-rendering?
💡 React.memo is a Higher-Order Component (HOC) that wraps a component — if props have not changed, it reuses the previous render result. It prevents unnecessary re-renders of child components when the parent re-renders. Because it uses shallow comparison, you should pair it with useMemo/useCallback when passing object or function props.
Read this first: useTransition / useDeferredValue
Up next: Error Boundary + Suspense
PreviousListNext
React.memo / useMemo / useCallback - React