Cleanup function in React - Mini Project: Build & Apply

Using Cleanup Function in React useEffect

📖 Scenario: You are building a React component that listens to window resize events to update the width shown on the screen. To avoid memory leaks, you need to clean up the event listener when the component unmounts.

🎯 Goal: Create a React functional component that tracks the window width using useState and useEffect. Add a cleanup function inside useEffect to remove the event listener when the component unmounts.

📋 What You'll Learn

Create a state variable called width initialized to window.innerWidth

Create a useEffect hook that adds a resize event listener to window

Inside the event listener, update the width state with the current window width

Add a cleanup function inside useEffect that removes the resize event listener

Render a <div> that displays the current width

💡 Why This Matters

🌍 Real World

Listening to window resize events is common in responsive web design to adjust layouts or content dynamically.

💼 Career

Understanding cleanup functions in useEffect is essential for React developers to prevent memory leaks and ensure app performance.

1

Setup state to track window width

Create a React functional component called WindowWidth. Inside it, use useState to create a state variable called width initialized to window.innerWidth.

React

import React, { useState, useEffect } from 'react';

function WindowWidth() {
  // Create state variable width initialized to window.innerWidth
  // Your code here
}

Hint

Use const [width, setWidth] = useState(window.innerWidth); inside the component.

2

Add useEffect to listen to window resize

Inside the WindowWidth component, add a useEffect hook. Inside it, define a function called handleResize that updates width state using setWidth(window.innerWidth). Then add a resize event listener on window that calls handleResize.

React

import React, { useState, useEffect } from 'react';

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  // Add useEffect hook with handleResize function and window resize event listener
  // Your code here
}

Hint

Inside useEffect, define handleResize and add the event listener.

3

Add cleanup function to remove event listener

Inside the useEffect hook, add a cleanup function that removes the resize event listener from window using window.removeEventListener('resize', handleResize).

React

import React, { useState, useEffect } from 'react';

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }
    window.addEventListener('resize', handleResize);

    // Add cleanup function to remove event listener
    // Your code here
  }, []);
}

Hint

Return a function inside useEffect that calls window.removeEventListener('resize', handleResize).

4

Render the current window width

Inside the WindowWidth component, add a return statement that renders a <div> showing the text Window width: followed by the current width state.

React

import React, { useState, useEffect } from 'react';

function WindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }
    window.addEventListener('resize', handleResize);

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

  // Render a div showing the current width
  // Your code here
}

Hint

Return a <div> element that displays Window width: {width}.

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