Как React обходит Fiber-дерево и что происходит с дочерними компонентами, когда обновляется родитель?

React Fiber — это переписанный алгоритм согласования (reconciliation), который представляет дерево компонентов в виде связного списка узлов (fiber-узлов). Каждый узел хранит ссылки на родителя, первого ребёнка и следующего брата, что позволяет обходить дерево итеративно, а не рекурсивно, и прерывать работу между кадрами.

Две фазы обхода

• Render phase — React строит новое дерево (work-in-progress), сравнивает его с текущим и помечает узлы флагами (Placement, Update, Deletion). Эта фаза может быть прервана и перезапущена.
• Commit phase — все накопленные изменения применяются к реальному DOM синхронно, чтобы пользователь не увидел промежуточное состояние.

Что происходит при обновлении родителя

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

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <Child /> {/* перерисуется при каждом клике */}
    </div>
  );
}

const Child = React.memo(function Child() {
  console.log('render Child');
  return <span>static</span>;
});

Обернув Child в React.memo, мы говорим React: если пропсы не изменились, переиспользуй предыдущий результат рендера и не спускайся в это поддерево. Аналогично работают PureComponent для классов и shouldComponentUpdate.

Приоритеты и прерывание

Fiber присваивает каждому обновлению приоритет (lane). Высокоприоритетные задачи (ввод пользователя) обрабатываются раньше, а низкоприоритетные (например, рендер большого списка) могут быть отложены. Это делает интерфейс отзывчивым даже при тяжёлых обновлениях.

Итог: React обходит Fiber-дерево итеративно в две фазы, а обновление родителя по умолчанию тянет за собой перерисовку потомков. Чтобы этого избежать, применяйте React.memo, useMemo и useCallback — они позволяют пропустить ненужные поддеревья и заметно ускорить приложение.