Причини повторного рендерингу компонентів у React

У React перерендеринг — це процес, коли компонент викликається знову, щоб React міг побудувати нове віртуальне дерево та порівняти його з попереднім.

Важливо, щоб розробник розумів що саме може викликати перерендеринг, щоб оптимізувати продуктивність та уникнути непотрібних оновлень.

Основні причини перерендерингу

Зміна стану

Коли викликається setState (наприклад, setCount), компонент завжди перерендериться.

jsx

const [count, setCount] = useState(0);
setCount(count + 1); // викликає перерендеринг

Зміна пропсів

Якщо компонент отримує нові значення пропсів, він також перерендериться.

jsx

<Child value={someValue} /> // якщо someValue змінилося → перерендеринг

Перерендеринг батьківського компонент

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

Зміна контексту

Якщо ви використовуєте useContext і значення контексту змінюється — всі компоненти, які його використовують, перерендеряться.

Примусовий перерендеринг

Наприклад, через useReducer, useSyncExternalStore або зовнішні сховища — можна вручну ініціювати оновлення компонент.

Як уникнути непотрібних перерендерингів

Метод	Що він робить
`React.memo(Component)`	Кешує компонент, не оновлює без змін пропсів
`useMemo(fn, deps)`	Кешує обчислення між рендерингами
`useCallback(fn, deps)`	Кешує функції, що передаються вниз по дереву
`useRef()`	Зберігає дані без перерендерингу компонент
`key`	Контролює ідентичність компонент в списках

Приклад непотрібного рендерингу

jsx

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

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

function Child() {
  console.log("Child re-renders");
  return <div>I don't change anything</div>;
}

Навіть якщо Child не використовує count, він все ще перерендерюється, оскільки батьківський компонент оновився.

Рішення

jsx

const Child = React.memo(() => {
  console.log("Child re-renders");
  return <div>I don't change anything</div>;
});

Пастка: нове значення за посиланням

jsx

const obj = { a: 1 };
<Component data={obj} />

Нове посилання створюється щоразу, навіть якщо дані однакові → перерендеринг. Використовуйте useMemo або useCallback, щоб зберегти посилання.

Підсумок

Компоненти в React перерендерюються при змінах state, props, context або батьківських компонентів
Оптимізація можлива за допомогою React.memo, useMemo, useCallback та useRef
Уникайте передачі нових об'єктів та функцій без необхідності

Порада:

Оптимізуйте лише компоненти, які справді створюють навантаження. Передчасна оптимізація — це зло.

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

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

Premium

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

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

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