Bug: React run cleanup for zero dependency `useEffect` for the first time about react

[kiljag]

That is the default behavior of react strict mode. react renders each component twice in development mode.

check out this. https://react.dev/reference/react/StrictMode

[PurpleMonkey729]

@stephanemalho
Thanks for your answer.
At 2th step "• than he go to the children component", 'than" is right?
Is it "then", isn't it?

[MeenuyD]

Hello yes react in strict render the component twice and when using the useEffect hook with an empty dependency array ([]), the effect is meant to run only once, similar to the componentDidMount lifecycle method in class components.

The cleanup function specified in the effect will be invoked when the component is unmounted, regardless of whether there are dependencies or not. However, in the case of an empty dependency array, the effect will not be re-triggered on subsequent re-renders of the component. I think so this behavior is intentional and follows React's rules for managing effects.

[stephanemalho]

here is the order for the render & re-render:
• APP read his component but bypass useEffect
• then he go to the children component
• he read the children file and bypass useEffect
• Now he read the useEffect inside the children
• he Do a re-render of the children (bypassing useEffect duh)
• return to App to read if there is a useEffect
• re-rend APP

But in my opinion, you don't need to use the return fonction inside useEffect in this case. You only need this return if you want to run something inside the component just before he will unmont.

import "./styles.css";
import { useEffect } from "react";

export default function App() {
console.log("first read")
return (
{/* thing to return */}
);
}

const User = (props) => {
console.log("second read")
useEffect(() => {
console.log("user effect fourth read", props);
return () => {
console.log("user cleanup fifth read or first read of all if the componentWillUnmount() ", props);
};
}, []);
console.log("thirth read")
return {/* User return */};
};

`

[stephanemalho]

@stephanemalho

Thanks for your answer.

At 2th step "• than he go to the children component", 'than" is right?

Is it "then", isn't it?

Yes it is you right ☺️