Unmounting phase in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a React component unmounts?

Consider a React functional component that uses useEffect with a cleanup function. What is the behavior of the cleanup function during the unmounting phase?

React

import React, { useEffect } from 'react';

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

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

A The cleanup function runs once when the component unmounts, stopping the interval.

B The cleanup function never runs because the dependency array is empty.

C The cleanup function runs every second along with the interval callback.

D The cleanup function runs only when the component re-renders, not on unmount.

💡 Hint

Think about what happens to side effects when a component is removed from the screen.

In React, the cleanup function returned by useEffect runs when the component unmounts to clean up side effects like timers or subscriptions.

❓ lifecycle

intermediate

Which React hook is best for cleanup on unmount?

You want to perform cleanup logic when a functional component unmounts. Which hook and pattern should you use?

A useState to track unmount and run cleanup in the setter.

B useEffect with a return function and an empty dependency array.

C useMemo to memoize cleanup logic on unmount.

D useCallback to define cleanup and call it on unmount.

💡 Hint

Cleanup logic is usually inside a return function of a hook that runs effects.

useEffect with an empty dependency array runs once on mount and its return function runs on unmount, perfect for cleanup.

🔧 Debug

advanced

Why does this cleanup not run on unmount?

Identify why the cleanup function does not run when the component unmounts in this code:

React

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    const id = setTimeout(() => console.log('done'), 1000);
  }, []);

  return <div>Example</div>;
}

A Because the dependency array is empty, cleanup runs only on re-render.

B Because setTimeout does not need cleanup and React ignores it.

C Because the cleanup function is missing; no function is returned from useEffect.

D Because the component never unmounts, so cleanup is not triggered.

💡 Hint

Check if useEffect returns a function for cleanup.

Without returning a cleanup function from useEffect, React has nothing to run on unmount.

❓ state_output

advanced

What is the console output when a component unmounts?

Given this React component, what will be logged to the console when the component unmounts?

React

import React, { useEffect } from 'react';

function Logger() {
  useEffect(() => {
    console.log('Mounted');
    return () => console.log('Unmounted');
  }, []);

  return <div>Logger</div>;
}

A "Mounted" logs on mount, "Unmounted" logs on unmount.

B "Unmounted" logs on mount, "Mounted" logs on unmount.

C Only "Mounted" logs, no unmount log appears.

D No logs appear because useEffect has an empty dependency array.

💡 Hint

Remember the order of useEffect and its cleanup function.

The effect runs on mount logging "Mounted"; the cleanup runs on unmount logging "Unmounted".

🧠 Conceptual

expert

Why is cleanup important in React unmounting phase?

Why should you always include cleanup logic in useEffect when your component sets up subscriptions or timers?

A To ensure the component never unmounts accidentally.

B To speed up the initial render of the component.

C To automatically re-run effects on every render.

D To prevent memory leaks and unexpected behavior after the component is removed.

💡 Hint

Think about what happens if timers or subscriptions keep running after the component is gone.

Without cleanup, timers or subscriptions continue running causing memory leaks and bugs.

Practice

1. What is the main purpose of the unmounting phase in React components?

easy

A. To initialize state when the component first appears

B. To update the component when props change

C. To render the component's UI on the screen

D. To clean up resources like timers or event listeners before the component is removed

Solution

1. Step 1: Understand the unmounting phase

   The unmounting phase happens when a component is about to be removed from the screen.

2. Step 2: Identify the purpose of cleanup

   During unmounting, React lets you clean up things like timers or event listeners to avoid bugs and memory leaks.

3. Final Answer:

   To clean up resources like timers or event listeners before the component is removed -> Option D

4. Quick Check:

   Unmounting phase = cleanup before removal [OK]

Hint: Unmounting phase means cleaning up before component disappears [OK]

Common Mistakes:

• Confusing unmounting with mounting or updating phases
• Thinking unmounting initializes state
• Believing unmounting is for rendering UI

2. Which of the following is the correct way to add a cleanup function inside a React useEffect hook?

easy

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

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

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

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

Solution

1. Step 1: Recall useEffect cleanup syntax

   The cleanup function must be returned from the function passed to useEffect.

2. Step 2: Check each option's syntax

   useEffect(() => { return () => { clearTimeout(timer); }; }, []); correctly returns a function that calls clearTimeout. Others either call clearTimeout immediately or do not return a function.

3. Final Answer:

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

4. Quick Check:

   Cleanup function is returned inside useEffect [OK]

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

Common Mistakes:

• Calling cleanup directly instead of returning a function
• Not returning anything from useEffect
• Returning the cleanup call instead of a function

3. What will be logged to the console when the following component unmounts?

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const id = setInterval(() => console.log('Tick'), 1000);
    return () => {
      clearInterval(id);
      console.log('Cleanup');
    };
  }, []);
  return <div>Timer running</div>;
}

medium

A. Nothing is logged on unmount

B. 'Tick' then 'Cleanup' immediately on unmount

C. 'Cleanup' logged once on unmount

D. Multiple "Tick" logs after unmount

Solution

1. Step 1: Understand the effect and cleanup

   The effect sets an interval that logs 'Tick' every second. The cleanup clears the interval and logs 'Cleanup'.

2. Step 2: What happens on unmount?

   When the component unmounts, the cleanup runs once, clearing the interval and logging 'Cleanup'. No more 'Tick' logs happen after unmount.

3. Final Answer:

   'Cleanup' logged once on unmount -> Option C

4. Quick Check:

   Cleanup logs once on unmount [OK]

Hint: Cleanup runs once on unmount, stopping intervals [OK]

Common Mistakes:

• Thinking 'Tick' logs after unmount
• Expecting no logs on unmount
• Confusing cleanup timing with effect start

4. Identify the error in this React component related to unmounting:

import React, { useEffect } from 'react';

function Listener() {
  useEffect(() => {
    window.addEventListener('resize', () => console.log('Resized'));
  }, []);
  return <div>Listening</div>;
}

medium

A. The event listener callback should be named function, not arrow function

B. Missing cleanup function to remove the event listener on unmount

C. useEffect should not have an empty dependency array

D. Event listener should be added inside the return statement

Solution

1. Step 1: Check event listener setup

   The component adds a resize event listener on mount but does not remove it on unmount.

2. Step 2: Identify missing cleanup

   Without cleanup, the listener stays active after unmount, causing memory leaks or bugs.

3. Final Answer:

   Missing cleanup function to remove the event listener on unmount -> Option B

4. Quick Check:

   Always remove listeners in cleanup [OK]

Hint: Always remove event listeners in cleanup function [OK]

Common Mistakes:

• Forgetting to remove event listeners on unmount
• Thinking arrow functions can't be event callbacks
• Misusing dependency arrays in useEffect

5. You have a React component that sets up a WebSocket connection in useEffect. Which is the best way to ensure the connection closes properly when the component unmounts?

useEffect(() => {
  const socket = new WebSocket('wss://example.com');
  socket.onmessage = (event) => console.log(event.data);
  // What should go here?
}, []);

hard

A. Return a cleanup function that calls socket.close() to close the connection

B. Call socket.close() immediately after setting onmessage

C. Do nothing; WebSocket closes automatically on unmount

D. Set socket = null in the cleanup function

Solution

1. Step 1: Understand WebSocket lifecycle in React

   WebSocket connections stay open until explicitly closed. They do not close automatically on component unmount.

2. Step 2: Implement cleanup to close connection

   Returning a cleanup function that calls socket.close() ensures the connection closes when the component unmounts, preventing resource leaks.

3. Final Answer:

   Return a cleanup function that calls socket.close() to close the connection -> Option A

4. Quick Check:

   Close WebSocket in cleanup function [OK]

Hint: Close WebSocket inside cleanup function returned by useEffect [OK]

Common Mistakes:

• Closing WebSocket immediately instead of on unmount
• Assuming WebSocket closes automatically
• Setting socket to null without closing