What is the difference between useEffect cleanup function and componentWillUnmount?

What is the difference between useEffect cleanup function and componentWillUnmount?

• A. The cleanup function runs after the component updates; componentWillUnmount runs when a class component unmounts.
• B. The cleanup function runs only after unmount; componentWillUnmount runs before the next effect.
• C. The cleanup function runs before the next effect or on unmount; componentWillUnmount runs when a class component unmounts.
• D. The cleanup function is used for data fetching cleanup only.

Answer: (C)

The idea being tested is how cleanup works in functional components with useEffect compared to the class component lifecycle. The cleanup function you return from an effect runs not only when the component unmounts but also just before the effect runs again due to its dependencies changing. This means it handles two situations: tidying up the previous effect's work before applying the next one, and performing final cleanup when the component is removed from the UI. In contrast, a class component’s unmount lifecycle method runs only once—when the component is about to be removed, with no relation to dependency changes or re-running effects. So, the cleanup in useEffect is invoked before the next effect executes (and on unmount), while componentWillUnmount triggers only on unmount. This distinction is what makes the functional approach flexible for both ongoing subscriptions or timers and final cleanup when the component leaves.

The idea being tested is how cleanup works in functional components with useEffect compared to the class component lifecycle.

The cleanup function you return from an effect runs not only when the component unmounts but also just before the effect runs again due to its dependencies changing. This means it handles two situations: tidying up the previous effect's work before applying the next one, and performing final cleanup when the component is removed from the UI. In contrast, a class component’s unmount lifecycle method runs only once—when the component is about to be removed, with no relation to dependency changes or re-running effects.

So, the cleanup in useEffect is invoked before the next effect executes (and on unmount), while componentWillUnmount triggers only on unmount. This distinction is what makes the functional approach flexible for both ongoing subscriptions or timers and final cleanup when the component leaves.