I'm studying React hooks and I noticed a strange behavior, can someone explain to me why?
The component is mounted, sets the state to the initial value and then is unmounted, to be mounted and updated again!!!
I understand that every update the component is re-rendered, but why is the componentWillUnmounted method (in this case useEffect's return) called?
I had the same strange behavior when I was studying class component and life cycles...
root component
function App() {
const [visible, setVisible] = useState(true);
return (
<div className='App'>
{visible && <UseEffect />}
<button onClick={() => setVisible((visible) => !visible)}>
Show/Hide
</button>
</div>
);
}
child component
const UseEffect = (props) => {
const [counter, setCounter] = useState(0);
//didMounted
useEffect(() => {
console.log('Cp Mounted');
//didUnmounted
return () => {
console.log('Cp UnMounted');
};
}, []);
//didUpdate
useEffect(() => {
console.log('Cp Updated');
});
//with state
useEffect(() => {
console.log('Change 'counter');
}, [counter]);
return (
<div>
<h1>{counter}</h1>
<button onClick={() => setCounter(counter + 1)}>+</button>
</div>
);
};
output browser console
This is driving me crazy!!! Please someone know explain why this happen?
Thx
