Unmount cycle behavior in react hooks - reactjs

Question

I have parent and child components like below:
Parent
import React, { useEffect, useState } from "react";
import Cmp1 from "./Cmp1";
const App = () => {
console.log("render App");
const [parentState, setParentState] = useState(null);
const updateParent = state => {
setParentState(state);
};
useEffect(() => {
console.log("mount App");
}, []);
useEffect(() => {
console.log("update App");
return () => {
console.log("unmount App");
};
}, [parentState]);
return (
<div>
<h1>{parentState}</h1>
<Cmp1 updateParent={updateParent} />
</div>
);
};
export default App;
Child
import React, { useEffect } from "react";
const Cmp1 = ({ updateParent }) => {
console.log('render Cmp1')
useEffect(() => {
console.log("mount Cmp1");
updateParent('From Cmp1')
}, []);
return <h1>Cmp1</h1>;
};
export default Cmp1;
When rendering these two components, I added some life cycle hooks and here is the output
render App
render Cmp1
mount Cmp1
mount App
update App
render App
render Cmp1
unmount App // <= no idea why this came out
update App
Here is the codesanbox.
I didn't unmount the component and just did a simple state update from child to parent, I was not expecting that line and I have no idea why this unmount cycle is running here.
Since I'm new to react hooks, could someone please explain this?

Answer 1

Your hook is dependent on parentState, so the returned function is not only running on component unmount. Its a normal clean up function that gets called every time before the hook is called again and again on unmount.
To log when the component unmounts, you need to use an effect with [] dependencies.
useEffect(() => {
return () => {
console.log('unmount');
}
}, [])
From the docs (my bold):
When exactly does React clean up an effect? React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time. We’ll discuss why this helps avoid bugs and how to opt out of this behavior in case it creates performance issues later below.