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.