useEffect

useEffect(() => {
	console.log("Effect execute");
});

// Watch dependency changed
useEffect(() => {
	console.log("dependency changed");
}, [dependency]);

// Run onMount
useEffect(() => {
	console.log("Component mounted");
}, []);

// During unMounting
useEffect(() => {
	return () => {
		console.log("Component is unmounting");
	}
}, []);

useEffect on Object

const [user, setUser] = useState({ name: "John", age: 25 });

useEffect(() => {
  console.log("User changed");
}, [user]); // ⚠️ Only triggers if the object reference changes

// This WON'T trigger useEffect:
const user = { name: "John", age: 25 };
user.age = 26; // Same object, just modified
setUser(user); // Same reference!

// This WILL trigger useEffect:
setUser({ ...user, age: 26 }); // New object reference

In Strict mode, useEffect runs twice in development mode (npm run dev). This happens because React will Mount → Unmount → Mount during development mode. However, it only runs once in production mode. This can be simulated with the following command.

npm run build
npm run preview

async/await inside useEffect

useEffect(() => {
	(async () => {
		const result = await fetch();
	})();
}, [])