Lifecycle mapping with hooks in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ lifecycle

intermediate

What happens when a React component with useEffect([]) mounts?

Consider a React functional component that uses useEffect with an empty dependency array []. What lifecycle phase does this represent?

React

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

A The effect runs before the component mounts.

B The effect runs after every render including the first.

C The effect runs only once after the component mounts.

D The effect never runs because dependencies are empty.

💡 Hint

Think about when useEffect with empty dependencies triggers.

Using useEffect with an empty dependency array means the effect runs once after the component mounts, similar to componentDidMount in class components.

❓ lifecycle

intermediate

When does a useEffect cleanup function run?

Given this React hook code, when is the cleanup function executed?

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

React

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

A Before the effect runs again and when the component unmounts.

B Only when the component unmounts.

C Immediately after the effect runs.

D Never, because cleanup functions are optional.

💡 Hint

Cleanup runs before the next effect or unmount.

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

❓ component_behavior

advanced

What is the output sequence of console logs for this component?

Analyze the following React component and determine the order of console logs when it mounts and then updates due to count change.

React

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

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

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

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

A Effect run, Cleanup, Effect run

B Effect run, Effect run, Cleanup

C Cleanup, Effect run, Cleanup

D Effect run only once, no cleanup

💡 Hint

Remember cleanup runs before the next effect.

On mount, effect runs. On update (count changes), cleanup runs first, then effect runs again.

📝 Syntax

advanced

Which useEffect hook syntax causes a syntax error?

Identify the option that will cause a syntax error in React when using useEffect.

A useEffect(() => console.log('Hi'), []);

B useEffect(() => { return () => console.log('Cleanup'); }, [value]);

C useEffect(() => { console.log('Hi'); }, []);

D useEffect(() => { console.log('Hi') }, );

💡 Hint

Check the dependency array syntax.

Option D has a trailing comma without a dependency array, causing a syntax error.

🔧 Debug

expert

Why does this useEffect cause an infinite loop?

Examine the code below. Why does the component keep re-rendering infinitely?

const [count, setCount] = useState(0);
useEffect(() => {
  setCount(count + 1);
}, [count]);

React

const [count, setCount] = useState(0);
useEffect(() => {
  setCount(count + 1);
}, [count]);

A Because useEffect has no dependency array, so it runs every render.

B Because setCount inside useEffect updates count, triggering useEffect again endlessly.

C Because count is not initialized properly.

D Because setCount is called outside useEffect.

💡 Hint

Think about what triggers useEffect and what setCount does.

Updating state inside a useEffect that depends on that state causes the effect to run repeatedly, creating an infinite loop.

Practice

1. Which React hook is used to run code after a component renders, replacing lifecycle methods like componentDidMount and componentDidUpdate?

easy

A. useEffect

B. useState

C. useContext

D. useRef

Solution

1. Step 1: Understand lifecycle replacement

   The useEffect hook runs code after rendering, replacing lifecycle methods like componentDidMount and componentDidUpdate.

2. Step 2: Identify the correct hook

   useState manages state, useContext accesses context, and useRef stores mutable values. Only useEffect runs side effects after render.

3. Final Answer:

   useEffect -> Option A

4. Quick Check:

   Effect hook = useEffect [OK]

Hint: useEffect runs code after render like lifecycle methods [OK]

Common Mistakes:

• Confusing useState with useEffect
• Thinking useRef runs effects
• Believing useContext triggers after render

2. Which of the following is the correct syntax to run an effect only once when a React component mounts using useEffect?

easy

A. useEffect(() => { /* code */ }, null);

B. useEffect(() => { /* code */ });

C. useEffect(() => { /* code */ }, true);

D. useEffect(() => { /* code */ }, []);

Solution

1. Step 1: Understand dependency array usage

   Passing an empty array [] as the second argument to useEffect makes it run only once after the first render (component mount).

2. Step 2: Analyze each option

   useEffect(() => { /* code */ }); runs after every render. useEffect(() => { /* code */ }, true); runs after every render since non-array dependencies are ignored. useEffect(() => { /* code */ }, null); with null also runs after every render as it's not an array.

3. Final Answer:

   useEffect(() => { /* code */ }, []); -> Option D

4. Quick Check:

   Empty array = run once [OK]

Hint: Empty dependency array runs effect once on mount [OK]

Common Mistakes:

• Omitting dependency array causes effect every render
• Using null instead of empty array
• Passing non-array values like true or null as dependencies

3. What will be logged to the console when the following React component mounts and then the count state changes?

function Counter() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('Count is', count);
  }, [count]);
  return  setCount(count + 1)}>Increment;
}

medium

A. Logs 'Count is 0' once on mount only

B. Logs 'Count is 0' repeatedly every second

C. Logs 'Count is 0' on mount and 'Count is 1' after first click

D. Logs nothing because useEffect has dependencies

Solution

1. Step 1: Understand useEffect with dependency

   The effect runs after the component mounts and whenever count changes because count is in the dependency array.

2. Step 2: Trace the console logs

   On mount, count is 0, so it logs 'Count is 0'. After clicking the button, count becomes 1, triggering the effect again and logging 'Count is 1'.

3. Final Answer:

   Logs 'Count is 0' on mount and 'Count is 1' after first click -> Option C

4. Quick Check:

   Effect runs on mount and dependency change [OK]

Hint: Effect runs on mount and when dependencies change [OK]

Common Mistakes:

• Thinking effect runs only once without dependencies
• Assuming no logs because dependencies exist
• Confusing useEffect with setInterval

4. Identify the problem in this React component that uses useEffect and suggest the fix:

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

medium

A. No problem; code works fine as is

B. Missing cleanup function to clear the interval on unmount

C. Dependency array should include 'id' to update interval

D. setInterval should be replaced with setTimeout

Solution

1. Step 1: Analyze effect side effects

   The effect sets an interval but does not clear it, causing a memory leak when the component unmounts.

2. Step 2: Suggest cleanup function

   Return a cleanup function from useEffect that calls clearInterval(id) to stop the interval on unmount.

3. Final Answer:

   Missing cleanup function to clear the interval on unmount -> Option B

4. Quick Check:

   Cleanup prevents memory leaks [OK]

Hint: Always clean intervals/timeouts in useEffect cleanup [OK]

Common Mistakes:

• Forgetting to clear intervals causing leaks
• Adding dependencies unnecessarily
• Replacing setInterval with setTimeout incorrectly

5. You want to fetch user data only once when a component mounts and cancel the fetch if the component unmounts before it finishes. Which is the best way to implement this using useEffect?

hard

A. useEffect(() => {
const controller = new AbortController();
fetch('/user', { signal: controller.signal })
.then(res => res.json())
.then(data => console.log(data));
return () => controller.abort();
}, []);

B. useEffect(() => {
fetch('/user').then(res => res.json()).then(data => console.log(data));
}, []);

C. useEffect(() => {
fetch('/user').then(res => res.json()).then(data => console.log(data));
return () => console.log('Cleanup');
}, []);

D. useEffect(() => {
fetch('/user').then(res => res.json()).then(data => console.log(data));
}, [fetch]);

Solution

1. Step 1: Understand fetch cancellation

   To cancel a fetch request on unmount, use an AbortController and pass its signal to fetch.

2. Step 2: Implement cleanup to abort fetch

   Return a cleanup function from useEffect that calls controller.abort() to cancel the fetch if unmount happens early.

3. Final Answer:

   Use AbortController with cleanup to abort fetch -> Option A

4. Quick Check:

   AbortController + cleanup = safe fetch [OK]

Hint: Use AbortController and cleanup to cancel fetch on unmount [OK]

Common Mistakes:

• Not cancelling fetch causing memory leaks
• Logging cleanup without aborting fetch
• Adding fetch to dependencies unnecessarily