Що таке React.memo і навіщо він потрібен

React.memo — це вища функція (HOC) в React, яка дозволяє мемоізувати функціональні компоненти.

Вона запобігає непотрібним повторним рендерингам, якщо пропси не змінилися.

Як працює React.memo?

Коли ви обгортаєте компонент у React.memo, React порівнює поточні та попередні пропси (за замовчуванням — поверхнево) і пропускає повторний рендер, якщо вони залишилися незмінними.

Синтаксис

jsx

const MyComponent = React.memo((props) => {
  // компонент
});

Приклад: без React.memo

jsx

const Button = ({ onClick }) => {
  console.log("🔁 Button rendered");
  return <button onClick={onClick}>Click me</button>;
};

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

  return (
    <>
      <Button onClick={() => console.log("clicked")} />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

Навіть при натисканні +1, Button буде повторно рендеритися, оскільки нова функція onClick створюється при кожному рендері.

З React.memo + useCallback

jsx

const Button = React.memo(({ onClick }) => {
  console.log("✅ Button rendered");
  return <button onClick={onClick}>Click me</button>;
});

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

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

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

Тепер Button не буде повторно рендеритися, якщо handleClick не змінився.

Коли використовувати React.memo?

Корисно, якщо:

Компонент часто отримує однакові пропси
Це обчислювально важкий компонент (наприклад, містить вкладені списки, графіки)
Ви хочете уникнути непотрібних повторних рендерів

Не потрібно, якщо:

Компонент малий і простий
Props завжди різні (наприклад, функція створюється заново кожного разу без useCallback)
Немає проблем з продуктивністю

Користувацьке порівняння пропсів

Якщо вам потрібно контролювати порівняння вручну:

jsx

React.memo(Component, (prevProps, nextProps) => {
  return prevProps.value === nextProps.value;
});

Висновок:

React.memo допомагає оптимізувати продуктивність, уникаючи непотрібних повторних рендерів компонентів, якщо їх пропси не змінилися. Але його слід використовувати обережно і за потреби.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Що таке React.memo і навіщо він потрібен

#Як працює React.memo?

#Синтаксис

#Приклад: без React.memo

#З React.memo + useCallback

#Коли використовувати React.memo?

#Користувацьке порівняння пропсів