Cleanup function in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the cleanup function runs in this React component?

Consider this React component using useEffect with a cleanup function. What will be logged when the component unmounts?

React

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log('Tick');
    }, 1000);

    return () => {
      clearInterval(id);
      console.log('Cleanup done');
    };
  }, []);

  return <div>Timer running</div>;
}

A No logs appear because the cleanup runs immediately.

B "Tick" logs once, and on unmount logs "Cleanup done" multiple times.

C "Tick" logs every second, and on unmount logs "Cleanup done" once.

D "Tick" logs every second, but cleanup never runs on unmount.

💡 Hint

Think about what useEffect cleanup functions do when the component unmounts.

The cleanup function returned by useEffect runs once when the component unmounts. It clears the interval and logs "Cleanup done". The interval logs "Tick" every second while mounted.

❓ lifecycle

intermediate

When does the cleanup function run in this React effect?

Given this React component, when will the cleanup function inside useEffect run?

React

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect runs');
    return () => {
      console.log('Cleanup runs');
    };
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

A Cleanup runs before the effect runs again and when the component unmounts.

B Cleanup never runs because dependencies are present.

C Cleanup runs after every render regardless of dependencies.

D Cleanup runs only once when the component mounts.

💡 Hint

Remember how useEffect cleanup works with dependencies.

The cleanup function runs before the effect runs again due to dependency changes and also when the component unmounts.

🔧 Debug

advanced

Why does this cleanup function cause a memory leak?

Examine this React component. Why does it cause a memory leak despite having a cleanup function?

React

import React, { useEffect } from 'react';

function ScrollTracker() {
  useEffect(() => {
    const onScroll = () => {
      console.log(window.scrollY);
    };
    window.addEventListener('scroll', onScroll);

    return () => {
      // Missing cleanup of event listener
    };
  }, []);

  return <div style={{ height: '200vh' }}>Scroll down</div>;
}

A The effect runs multiple times causing multiple listeners.

B The event listener is removed twice causing an error.

C The cleanup function clears the console logs but not the listener.

D The cleanup function does not remove the scroll event listener, causing a memory leak.

💡 Hint

Think about what should happen inside the cleanup function for event listeners.

The cleanup function must remove the event listener added in the effect. Here it is empty, so the listener stays active causing a memory leak.

📝 Syntax

advanced

Which option correctly defines a cleanup function in useEffect?

Choose the correct syntax for returning a cleanup function inside useEffect in React.

React

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    const timer = setTimeout(() => console.log('Hello'), 1000);

    // Which return is correct?
  }, []);

  return <div>Example</div>;
}

A return () => clearTimeout(timer);

B return clearTimeout(timer);

C return { clearTimeout(timer) };

D return function clearTimeout(timer);

💡 Hint

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

The cleanup function is a function returned from useEffect. Option A correctly returns an arrow function that calls clearTimeout.

❓ state_output

expert

What is the console output sequence when this component mounts and unmounts?

Analyze this React component. What will be the exact console output sequence when it mounts and then unmounts?

React

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

function Demo() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect start', count);
    return () => {
      console.log('Cleanup', count);
    };
  }, [count]);

  useEffect(() => {
    console.log('Mount only');
    return () => {
      console.log('Unmount only');
    };
  }, []);

  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

A "Effect start 0", "Mount only", "Cleanup 0", "Effect start 1", "Cleanup 1", "Effect start 2", "Unmount only"

B "Effect start 0", "Mount only", "Cleanup 0", "Effect start 1", "Cleanup 1", "Effect start 2", "Cleanup 2", "Unmount only"

C "Mount only", "Effect start 0", "Cleanup 0", "Effect start 1", "Cleanup 1", "Effect start 2", "Cleanup 2", "Unmount only"

D "Mount only", "Effect start 0", "Effect start 1", "Effect start 2", "Cleanup 2", "Unmount only"

💡 Hint

Consider the order of effects and cleanups when dependencies change and when the component unmounts.

The first effect with [count] runs on mount with count 0, then cleanup runs before next effect runs on count change. The second effect with empty dependencies runs once on mount and cleanup on unmount.