React: What are React.memo, useMemo, useCallback?

React.memo, useMemo, and useCallback are optimization tools that prevent unnecessary re-renders.

Simple analogy: Imagine you are a chef and a customer comes.

• React.memo — is a guard at the entrance: "This customer already ate today? Yes? Then don't let them in — why cook twice?"
• useMemo — is a refrigerator: instead of peeling potatoes from scratch every time, you take already peeled ones.
• useCallback — is a cook with an unchanged recipe: you give them the same piece of paper with the recipe, not writing a new one each time.

React.memo — component memoization: Prevents component re-rendering if its props have not changed.

1const Button = React.memo(({ label, onClick }) => {
2    return <button onClick={onClick}>{label}</button>;
3});
4// Button re-renders ONLY if label or onClick changed

useMemo — value memoization: Remembers the result of a calculation and recalculates only when dependencies change.

1const total = useMemo(() => {
2    return items.reduce((sum, item) => sum + item.price, 0);
3}, [items]);  // Recalculate only if items changed

useCallback — function memoization: Remembers a function between renders (so it is not recreated).

1const handleClick = useCallback(() => {
2    setCount(c => c + 1);
3}, []);  // Function is not recreated

How they work together (real-world pattern):

1const TodoList = React.memo(function TodoList({ todos, onToggle }) {
2  console.log("TodoList rendered");
3  return (
4    <ul>
5      {todos.map(todo => (
6        <li key={todo.id} onClick={() => onToggle(todo.id)}>
7          {todo.text}
8        </li>
9      ))}
10    </ul>
11  );
12});
13
14function App() {
15  const [todos, setTodos] = useState([]);
16  const [count, setCount] = useState(0); // Unrelated state
17
18  const handleToggle = useCallback((id) => {
19    setTodos(prev => prev.map(t => 
20      t.id === id ? { ...t, done: !t.done } : t
21    ));
22  }, []);
23
24  return (
25    <div>
26      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
27      <TodoList todos={todos} onToggle={handleToggle} />
28    </div>
29  );
30}
31// When count changes, TodoList does NOT re-render (stable props)

When NOT to use:

• Memoizing simple components with cheap renders — the overhead of memoization exceeds the cost of re-rendering.
• Props always change on every render — memoization provides zero benefit.
• With React 19's React Compiler — it handles this automatically.

Important:

• Do not use memoization everywhere — it also costs resources (memory for cached values, comparison for React.memo).
• Use only if there are real performance problems (measure with Profiler first).
• React 19 includes React Compiler, which does this automatically.