Cleanup function in React - Step-by-Step Execution

Concept Flow - Cleanup function

Component mounts

↓

useEffect runs

↓

Setup side effect

↓

Component updates or unmounts?

Yes→Cleanup function runs

↓

Side effect cleaned

↓

Component stays mounted

When a React component mounts, useEffect runs and sets up a side effect. On update or unmount, the cleanup function runs to remove or reset the effect.

Execution Sample

React

useEffect(() => {
  const id = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(id);
}, []);

This code sets up a timer that logs 'tick' every second and cleans it up when the component unmounts.

Execution Table

Step	Trigger	Action	Effect Setup	Cleanup Function Called	Effect Cleanup
1	Component mounts	useEffect runs	setInterval started	No	No
2	1 second passes	Interval callback runs	No change	No	No
3	Component unmounts	Cleanup function runs	No change	Yes	clearInterval called
4	After unmount	No further interval callbacks	No change	No	No

💡 Component unmount triggers cleanup, stopping the interval and preventing further callbacks.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
id	undefined	interval ID assigned	interval ID unchanged	interval cleared	undefined or invalid

Key Moments - 3 Insights

Why does the cleanup function run when the component unmounts?

Because React calls the cleanup function returned by useEffect to remove side effects and avoid memory leaks, as shown in step 3 of the execution_table.

What happens if we forget to clear the interval in the cleanup?

The interval keeps running even after the component is gone, causing unexpected behavior or memory leaks, which is prevented by the cleanup in step 3.

Does the cleanup function run on every render?

No, it runs only before the next effect runs or when the component unmounts. Here, with an empty dependency array, it runs only on unmount (step 3).

Visual Quiz - 3 Questions

Look at the execution_table, what happens at step 3?

A The component mounts and sets up the interval

B The cleanup function runs and clears the interval

C The interval callback logs 'tick'

D Nothing happens

💡 Hint

Check the 'Cleanup Function Called' and 'Effect Cleanup' columns at step 3 in the execution_table

According to variable_tracker, what is the state of 'id' after step 3?

A Undefined

B Interval ID assigned and active

C Interval cleared and invalid

D Interval ID changed to a new value

💡 Hint

Look at the 'After Step 3' and 'Final' columns for 'id' in variable_tracker

If the dependency array was omitted, when would the cleanup function run?

A On every render before the next effect runs

B Only on component unmount

C Never

D Only once after the first render

💡 Hint

Recall React's useEffect behavior without dependencies, cleanup runs before each new effect

Concept Snapshot

useEffect(() => {
  // setup side effect
  return () => {
    // cleanup side effect
  };
}, [dependencies]);

Cleanup runs before next effect or on unmount.
Prevents memory leaks and stale effects.

Full Transcript

In React, the cleanup function inside useEffect runs to remove side effects like timers or subscriptions. When the component mounts, useEffect sets up the effect. When the component unmounts or before the effect runs again, React calls the cleanup function to clear or reset the effect. This prevents issues like memory leaks. For example, a timer set with setInterval is cleared in cleanup to stop it when the component is gone. If dependencies are empty, cleanup runs only on unmount. Without dependencies, cleanup runs before every new effect. This flow ensures React components manage resources safely and efficiently.

Practice

1. What is the main purpose of a cleanup function in a React useEffect hook?

easy

A. To initialize state variables before rendering

B. To remove timers, listeners, or subscriptions when the component unmounts or before the effect reruns

C. To fetch data from an API after the component mounts

D. To render JSX elements conditionally

Solution

1. Step 1: Understand the role of cleanup functions

   Cleanup functions are used to tidy up side effects like timers or event listeners to prevent memory leaks.

2. Step 2: Identify when cleanup runs

   Cleanup runs when a component unmounts or before the effect runs again, ensuring resources are freed.

3. Final Answer:

   To remove timers, listeners, or subscriptions when the component unmounts or before the effect reruns -> Option B

4. Quick Check:

   Cleanup function purpose = Remove resources [OK]

Hint: Cleanup frees resources when component unmounts or effect reruns [OK]

Common Mistakes:

• Thinking cleanup initializes state
• Confusing cleanup with data fetching
• Assuming cleanup runs after every render

2. Which of the following is the correct syntax to define a cleanup function inside useEffect?

easy

A. useEffect(() => { () => { clearTimeout(timer); }; }, []);

B. useEffect(() => { clearTimeout(timer); return; }, []);

C. useEffect(() => { return () => { clearTimeout(timer); }; }, []);

D. useEffect(() => { return clearTimeout(timer); }, []);

Solution

1. Step 1: Recognize cleanup function syntax

   The cleanup function must be returned from the effect callback as a function.

2. Step 2: Check each option

   useEffect(() => { return () => { clearTimeout(timer); }; }, []); correctly returns a function that calls clearTimeout. Others either don't return a function or return the wrong value.

3. Final Answer:

   useEffect(() => { return () => { clearTimeout(timer); }; }, []); -> Option C

4. Quick Check:

   Cleanup function = returned function inside useEffect [OK]

Hint: Cleanup must be a returned function inside useEffect [OK]

Common Mistakes:

• Not returning a function from useEffect
• Returning the result of cleanup call instead of a function
• Placing cleanup code outside the returned function

3. What will be logged to the console when the component unmounts in this code?

function Timer() {
  React.useEffect(() => {
    const id = setInterval(() => console.log('tick'), 1000);
    return () => {
      clearInterval(id);
      console.log('cleanup');
    };
  }, []);
  return null;
}

medium

A. Nothing, because the component never unmounts

B. 'tick' once and no 'cleanup'

C. 'cleanup' every second and no 'tick'

D. 'tick' every second and then 'cleanup' once when unmounting

Solution

1. Step 1: Understand the effect behavior

   The effect sets an interval that logs 'tick' every second and returns a cleanup function that clears the interval and logs 'cleanup'.

2. Step 2: Trace what happens on unmount

   When the component unmounts, the cleanup runs once, clearing the interval and logging 'cleanup'.

3. Final Answer:

   'tick' every second and then 'cleanup' once when unmounting -> Option D

4. Quick Check:

   Interval logs 'tick'; cleanup logs 'cleanup' once [OK]

Hint: Cleanup logs once on unmount, interval logs repeatedly [OK]

Common Mistakes:

• Thinking cleanup runs repeatedly
• Confusing interval clearing with immediate stop
• Expecting no logs at all

4. Identify the error in this React effect with cleanup:

useEffect(() => {
  window.addEventListener('resize', handleResize);
  return window.removeEventListener('resize', handleResize);
}, []);

medium

A. The cleanup function should be a function returned, not the result of removeEventListener call

B. The event listener should be added inside the cleanup function

C. The effect should not have a dependency array

D. handleResize should be defined inside useEffect

Solution

1. Step 1: Check cleanup function syntax

   The cleanup must be a function returned from useEffect, not the result of calling removeEventListener immediately.

2. Step 2: Identify correct cleanup pattern

   The cleanup should be: return () => window.removeEventListener('resize', handleResize); to run on unmount.

3. Final Answer:

   The cleanup function should be a function returned, not the result of removeEventListener call -> Option A

4. Quick Check:

   Cleanup must be a returned function [OK]

Hint: Return a function for cleanup, not the cleanup call itself [OK]

Common Mistakes:

• Calling cleanup immediately instead of returning a function
• Adding event listener inside cleanup
• Ignoring dependency array effects

5. You want to subscribe to a WebSocket in a React component and clean up properly. Which code correctly uses a cleanup function to close the socket when the component unmounts or the URL changes?

function SocketComponent({ url }) {
  React.useEffect(() => {
    const socket = new WebSocket(url);
    socket.onmessage = (event) => console.log(event.data);
    // What cleanup code is correct?
  }, [url]);
  return null;
}

hard

A. return () => { socket.close(); };

B. socket.close();

C. return socket.close();

D. return () => socket.onmessage = null;

Solution

1. Step 1: Understand cleanup for WebSocket

   To avoid leaks, the socket must be closed when the component unmounts or URL changes.

2. Step 2: Identify correct cleanup syntax

   The cleanup must be a function returned from useEffect that calls socket.close(). return () => { socket.close(); }; does this correctly.

3. Final Answer:

   return () => { socket.close(); }; -> Option A

4. Quick Check:

   Cleanup returns function closing socket [OK]

Hint: Return a function that closes socket for cleanup [OK]

Common Mistakes:

• Calling close immediately instead of returning a function
• Returning the result of close() instead of a function
• Only nullifying event handlers without closing socket