Перерендеривание React‑компонента

Условие

Нужно выяснить, будет ли происходить повторный рендер компонента OtherFc при изменении состояния в родительском компоненте.

import { useEffect, useState, FC, PropsWithChildren } from "react";

const OtherFc = () => {
  // console.log("render");

  return <div>2</div>;
};

const MainFc: FC<PropsWithChildren> = ({ children }) => {
  const [state, setState] = useState(0);
  console.log("state", state);

  useEffect(() => {
    setInterval(() => {
      setState((prev) => prev + 1);
    }, 1000);
  }, []);

  return <div>{children}</div>;
};

export const App = () => (
  <MainFc>
    <OtherFc />
  </MainFc>
);

Ответ

При обновлении только state внутри MainFc OtherFc не обязан рендериться заново: children остаётся тем же JSX-объектом, созданным App. Сам App из-за этого состояния не обновляется.

Это отличается от <OtherFc />, созданного прямо в теле MainFc на каждом рендере. В данном примере MainFc повторно возвращает прежний children, и React может пропустить эту ветку. Собственное состояние/контекст OtherFc или новый рендер App изменили бы ситуацию. Главная ошибка фрагмента — отсутствие очистки интервала:

useEffect(() => {
  const timer = setInterval(() => setState(value => value + 1), 1000);
  return () => clearInterval(timer);
}, []);

Количество development-вызовов в Strict Mode не следует принимать за точное число пользовательских обновлений.

Источник: react.dev.