Как вызов setState внутри компонента влияет на его дочерние компоненты?

Как setState влияет на дочерние компоненты

Когда вы вызываете setState в родительском компоненте, React помечает этот компонент как 'грязный' и планирует его ререндер. Во время следующего рендера React создает новое виртуальное DOM-дерево для родителя и всех его дочерних элементов. По умолчанию дочерние компоненты также ререндерятся, даже если их пропсы остались прежними.

Почему это происходит

React не сравнивает пропсы автоматически — он просто вызывает функцию рендера для каждого дочернего компонента. Это гарантирует, что UI всегда синхронизирован с состоянием, но может быть избыточным. Например:

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Click</button>
      <Child />
    </div>
  );
}

function Child() {
  console.log('Child re-rendered');
  return <div>Static content</div>;
}

При каждом клике Child будет выводить сообщение, хотя его содержимое не меняется.

Как оптимизировать

• React.memo — оборачивает компонент и предотвращает ререндер, если пропсы не изменились (поверхностное сравнение).
• useMemo/useCallback — мемоизируют значения и функции, чтобы пропсы оставались стабильными.
• shouldComponentUpdate (в классовых компонентах) — позволяет вручную управлять ререндером.

Вывод

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