Почему 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 />?