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.