Unmounting phase in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the unmounting phase in React?

The unmounting phase is when a React component is removed from the UI and cleaned up before it disappears from the screen.

beginner

Which React hook is used to run cleanup code during the unmounting phase?

The useEffect hook with a cleanup function returned inside it runs during the unmounting phase.

intermediate

Why is cleanup important during the unmounting phase?

Cleanup stops memory leaks and removes event listeners or timers that are no longer needed when the component leaves the screen.

intermediate

Show a simple example of cleanup in a React functional component.

Inside <code>useEffect(() => { const timer = setTimeout(...); return () => clearTimeout(timer); }, []);</code>, the returned function clears the timer when the component unmounts.

intermediate

What happens if you forget to clean up in the unmounting phase?

If cleanup is forgotten, your app may slow down or behave oddly because old timers or listeners keep running even after the component is gone.

Which React hook lets you run code when a component unmounts?

A useContext

B useState

C useEffect with a cleanup function

D useMemo

The cleanup function returned from useEffect runs when the component unmounts.

What is a common reason to use cleanup in the unmounting phase?

A To add new components

B To fetch new data

C To update the UI

D To stop timers or remove event listeners

Cleanup stops timers and removes event listeners to prevent memory leaks.

When does the cleanup function inside useEffect run?

A Only when the component mounts

B Before the component unmounts or before the effect runs again

C After every render

D Never

Cleanup runs before unmounting or before the effect runs again on dependency changes.

What could happen if you don't clean up in the unmounting phase?

A Memory leaks and unexpected behavior

B The component will never mount

C The app will crash immediately

D Nothing happens

Not cleaning up can cause memory leaks and bugs from leftover processes.

Which of these is NOT a typical cleanup task during unmounting?

A Fetching data

B Clearing timers

C Removing event listeners

D Cancelling subscriptions

Fetching data is not a cleanup task; it's usually done during mounting or updates.

Explain the unmounting phase in React and why cleanup is important.

Think about what happens when a component leaves the screen.

Describe how to use the useEffect hook to handle cleanup during unmounting.

Focus on the function returned inside useEffect.