Почему React.memo не мемоизирует компонент?

Имеем два компонента, один из которых принимает children в качестве единственного пропа. Для простоты я убрал всю не относящуюся к делу логику и разметку:

function Child() {
  useEffect(() => {
    console.log("Child render");
  });
  return <div>Child component</div>;
}

function Parent({ children }) {
  useEffect(() => {
    console.log("Parent render");
  });
  return (
    <div>
      Parent component
      {children}
    </div>
  );
}

Оба компонента соответствующим образом мемоизированы:

const ParentMemo = memo(Parent);
const ChildMemo = memo(Child);

Эти компоненты рендерятся в компоненте верхнего уровня со стейтом. Для простоты предположим, что там просто кнопка с обработчиком клика, инкрементирующим count, чтобы вызвать ререндер <App />:

function App() {
  useEffect(() => {
    console.log("App render");
  });
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment {count}</button>
      <ParentMemo>
        <ChildMemo />
      </ParentMemo>
    </>
  );
};

Я ожидаю, что при клике на кнопку выведется "App render" и ничего более, поскольку оба компонента корректно мемоизированы. Внимание, вопрос: почему ререндерится <ParentMemo />?


Ответы (0 шт):