Когда React решает что нужно перерисовать участок кода?

React и его механизм ререндера (перерисовки)

React решает, что нужно «перерисовать» (или выполнить ререндер) компонент или часть дерева компонентов, основываясь на нескольких ключевых принципах и механизмах. Само решение принимается не React «вручную», а является результатом работы его внутреннего алгоритма согласования (reconciliation) и реакции на изменения данных. Давайте разберем основные триггеры и процесс.

Основные триггеры ререндера

1. Изменение состояния (State Change)

    Это самый частый и очевидный триггер. Когда состояние компонента изменяется через `setState` (в классах) или функцию обновления состояния (в хуках, например, `setState` из `useState`), React планирует ререндер этого компонента и, по умолчанию, всех его потомков.

```jsx
const MyComponent = () => {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}> // Ререндер при клике
      Count: {count}
    </button>
  );
};
```

2. Изменение пропсов (Props Change)

    Когда родительский компонент передает новые пропсы своему ребенку, React сравнивает новые пропсы с предыдущими. Если они отличаются (по значению или по ссылке), ребенок будет ререндерен.

```jsx
const Parent = () => {
  const [value, setValue] = useState('old');
  return <Child prop={value} />; // Child ререндерится при изменении value
};
```

3. Ререндер родительского компонента

    По умолчанию, при ререндере родителя **все его дети ререндерятся автоматически**, даже если их пропсы не изменились. Это поведение можно оптимизировать.

1. Контекст (Context)

    Если компонент использует значение из **контекста (Context)** через `useContext` или `Context.Consumer`, и это значение изменяется (например, через `Context.Provider`), все компоненты, зависящие от этого контекста, будут ререндерены.

1. Принудительный ререндер (Force Update)

    В редких случаях можно вызвать `forceUpdate()` в классовых компонентах или использовать хитрые трюки с хуками, чтобы заставить ререндер без изменения состояния/пропсов.

Процесс принятия решения: Reconciliation и Diffing

React не перерисовывает DOM напрямую при каждом изменении. Процесс состоит из двух фаз:

1. Рендер (Render Phase) / Виртуальный DOM: React вызывает функции компонентов (или методы render в классах), чтобы получить новое дерево React элементов (Virtual DOM). Это вычисление происходит быстро, так как не затрагивает реальный DOM.

2. Фаза согласования (Commit Phase) / Diffing: React сравнивает ("diffing") новое дерево элементов с предыдущим (которое хранится в памяти). Этот алгоритм определяет минимальный набор изменений в реальном DOM.

    - React использует **пропсы и ключи (keys)** для определения, какой компонент соответствует предыдущему.
    - Если элемент одного типа (`<div>` → `<div>`), React рекурсивно сравнивает его атрибуты и детей.
    - Если элемент другого типа (`<div>` → `<span>`), React считает, что вся поддерево изменилось, и заменяет его полностью.
    - **Ключи (`key`)** помогают React идентифицировать элементы в списках между ререндерами. При изменении ключа элемент считается новым.

Оптимизации и контроль ререндера

Понимание триггеров позволяет контролировать процесс:

• React.memo: Предотвращает ререндер компонента, если его пропсы не изменились (поверхностное сравнение или custom сравнение).

  const OptimizedChild = React.memo(Child, (prevProps, nextProps) => {
    return prevProp.value === nextProp.value; // Ререндер только если value изменилась
  });
  

• useMemo / useCallback: Мемоизируют значения и функции, чтобы предотвратить их новое создание при каждом ререндере, что может стабилизировать пропсы детей и избежать их лишних ререндеров.

  const memoizedCallback = useCallback(() => {
    doSomething(count);
  }, [count]); // Функция меняется только при изменении count
  

• Структура состояния: Разделение состояния на мелкие, локальные части помогает избежать ререндера больших деревьев при изменении одной маленькой части данных.

Когда React НЕ ререндерит?

• Если состояние или пропсы не изменились (и компонент не обернут в React.memo).
• Если изменение произошло в переменной, не связанной с состоянием или пропсами (например, локальная переменная в функции компонента).
• Если компонент игнорирует изменение контекста (например, не использует useContext для изменяемого значения).

Итог: React «перерисовывает» участок кода (выполняет ререндер компонента) при изменении его входных данных (state, props, context) или при рендере его родителя. Однако финальное обновление реального DOM происходит только после вычисления минимальных различий (diff) между новым и старым виртуальным деревом. Эффективное управление ререндерами через мемоизацию и правильную структуру данных — ключ к производительности React-приложений.