Если функция обновления состояния передана в дочерний компонент и вызвана там, какие компоненты перерендерятся?

Как работает рендеринг при передаче функции обновления состояния

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

Какие компоненты перерендериваются

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

Пример кода

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <Child onIncrement={() => setCount(c => c + 1)} />
    </div>
  );
}

function Child({ onIncrement }) {
  console.log('Child re-rendered');
  return <button onClick={onIncrement}>Increment</button>;
}

При нажатии на кнопку в Child вызывается onIncrement, который обновляет count в Parent. Это приводит к повторному рендеру Parent и Child, что видно по сообщению в консоли.

Вывод

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