Как работает ререндер в React?

Ререндер (re-render) — это ключевой механизм React для обновления пользовательского интерфейса в ответ на изменения данных. Он не всегда означает прямое манипулирование реальным DOM-деревом браузера, что делает его эффективным.

Что запускает ререндер?

• Изменение состояния компонента через setState (или useState хук).
• Изменение пропсов, переданных компоненту от родителя.
• Изменение контекста (Context), на который подписан компонент.
• Ререндер родительского компонента (если не предприняты меры по оптимизации).

Процесс ререндера

При запуске ререндера React вызывает функцию рендеринга компонента (render-метод или тело функционального компонента). Эта функция возвращает новое описание UI на основе JSX, которое представляет собой объекты React-элементов (виртуальный DOM). Далее React запускает процесс согласования (reconciliation), сравнивая новое дерево элементов с предыдущим. Он определяет, какие части дерева действительно изменились, и вычисляет минимальный набор операций для обновления реального DOM. Это делает обновления быстрыми, даже если приложение большое.

Пример кода

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Состояние

  // Эта функция запускает ререндер при каждом вызове
  const handleClick = () => {
    setCount(count + 1); // Изменение состояния -> ререндер
  };

  // Этот вызов происходит при каждом ререндере
  console.log('Counter rendered, count:', count);

  return (
    
      You clicked {count} times
      Click me
    
  );
}

// Родительский компонент
function App() {
  const [message, setMessage] = useState('Hello');
  // Изменение message вызовет ререндер App, а затем и Counter,
  // так как Counter — его дочерний компонент.
  return (
    
      
       setMessage('Updated')}>Update Parent
    
  );
}

Оптимизация ререндеров

Чтобы избежать лишних ререндеров и повысить производительность, используют:

• React.memo для мемоизации функциональных компонентов.
• useMemo и useCallback для мемоизации значений и функций.
• Правильное структурирование состояния, чтобы изменения затрагивали только нужные компоненты.

Итог: Понимание ререндера критически важно для написания производительных React-приложений. Его следует применять осознанно, используя оптимизации для предотвращения ненужных обновлений компонентов, которые не изменились по факту.