Cleanup function in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a cleanup function in React's useEffect hook?

A cleanup function is a function returned from useEffect that React runs before the component unmounts or before the effect runs again. It helps to clean up resources like timers or subscriptions to avoid memory leaks.

beginner

When is the cleanup function inside useEffect called?

The cleanup function runs right before the component unmounts and also before the effect runs again if the dependencies change.

beginner

Why should you use a cleanup function in React effects?

To stop ongoing processes like timers, cancel subscriptions, or remove event listeners. This prevents bugs and memory leaks when components update or disappear.

intermediate

Show a simple example of a cleanup function in useEffect that clears a timer.

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('Timer done');
  }, 1000);
  return () => clearTimeout(timer);
}, []);

intermediate

What happens if you forget to add a cleanup function for subscriptions in useEffect?

The subscription keeps running even after the component unmounts, causing memory leaks and possibly unexpected behavior or errors.

When does React call the cleanup function returned by useEffect?

A Before the component unmounts or before the effect runs again

B Only when the component mounts

C Only after the component updates

D Never, cleanup functions are optional

React calls the cleanup function before unmounting and before running the effect again if dependencies change.

What is a common use case for a cleanup function in useEffect?

A Starting a timer

B Cleaning up a timer or subscription

C Rendering UI elements

D Fetching data

Cleanup functions are used to stop timers or unsubscribe from events to avoid memory leaks.

What happens if you don't clean up a subscription in useEffect?

A The subscription stops automatically

B React throws an error

C The subscription continues and may cause memory leaks

D The component re-renders infinitely

Without cleanup, subscriptions keep running after unmount, causing memory leaks.

How do you define a cleanup function inside useEffect?

A By returning a function from useEffect

B By calling a function inside useEffect

C By passing a function as a dependency

D By using a separate useCleanup hook

You return a function from useEffect to define the cleanup function.

Which React hook commonly uses cleanup functions?

A useMemo

B useState

C useContext

D useEffect

useEffect is the hook where cleanup functions are defined to manage side effects.

Explain what a cleanup function is in React and why it is important.

Think about what happens when a component disappears or updates.

Describe how you would use a cleanup function to clear a timer in a React component.

Remember to stop the timer when the component unmounts.