How can I avoid re-renderging of child component using React.memo? - react-hooks

Question

React.memo is not working as I expect.
Every time, I click the 'Button', the 'Oh No..' message is displayed.
I think displaying 'Oh No..' message means re-rendering of child component.
How do I modify my code to prevent re-rendering of child component caused by parent rendering?
import React from 'react';
function Test() {
const [page, setPage] = React.useState(0);
const Box = () => {
React.useEffect(() => console.info('Oh No..'), []);
return (<div>Box</div>)
};
const MemoBox = React.memo(Box);
return (
<div>
<MemoBox/>
<button onClick={()=>setPage(page+1)}>Button</button>
</div>
);
}
export default Test;
test image
I thought when I use React.memo, I can avoid re-rendering caused by parent re-redering.
I expected 'Oh No..' message is displayed once.

Answer 1

React.memo is not intended to be used as a "hook" inside of another component. Currently every time Test is rerendered - Box function is recreated and MemoBox variable is reasigned on each render. So every render - it is a "new" thing.
You can use React.useMemo or React.useCallback if you want to keep the declaration of Box and MemoBox inside Test component.
function Test() {
const [page, setPage] = React.useState(0);
const Box = () => {
React.useEffect(() => console.info("Oh No.."), []);
return <div>Box</div>;
};
// or or
const MemoBox2 = React.useMemo(() => Box, []);
const MemoBox = React.useCallback(Box, []);
useEffect(() => console.log(page), [page]);
return (
<div>
<MemoBox />
<button onClick={() => setPage(page + 1)}>Button</button>
</div>
);
}
If you want to use React.memo - then you need to move Box declaration and React.memo outside:
function Test() {
const [page, setPage] = React.useState(0);
useEffect(() => console.log(page), [page]);
return (
<div>
<MemoBox />
<button onClick={() => setPage(page + 1)}>Button</button>
</div>
);
}
const Box = () => {
React.useEffect(() => console.info("Oh No.."), []);
return <div>Box</div>;
};
const MemoBox = React.memo(Box);