Common lifecycle use cases in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when the component mounts and updates?

Consider this React functional component using hooks:

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

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

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

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

What will be logged to the console when the component first appears and each time the button is clicked?

React

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

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

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

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

A Logs 'Effect runs' once when mounted only.

B Logs 'Effect runs' every time the component renders, including mount and updates.

C Logs nothing because useEffect has no dependencies.

D Logs 'Effect runs' only when the count changes.

💡 Hint

Think about when useEffect runs if no dependency array is provided.

Without a dependency array, useEffect runs after every render, including the first mount and every update.

❓ state_output

intermediate

What is the displayed count after clicking the button once?

Look at this React component:

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me twice</button>
    </div>
  );
}

What will the count show after clicking the button once?

React

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me twice</button>
    </div>
  );
}

A Count will be 1 after one click.

B Count will be 2 after one click.

C Count will be 0 after one click.

D Count will be 3 after one click.

💡 Hint

Remember that state updates may be batched and use the current state value.

Both setCount calls use the same stale count value (0), so the count increments only once to 1.

🔧 Debug

advanced

Why does this cleanup function not run on unmount?

Consider this React component:

import React, { useEffect } from 'react';

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

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

But when the component unmounts, 'tick' keeps logging every second. Why?

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 component never unmounts, so cleanup never runs.

B The cleanup function is not returned properly from useEffect.

C The setInterval id is not accessible inside the cleanup function.

D The dependency array is empty, so cleanup never runs.

💡 Hint

Think about when cleanup functions run in React.

Cleanup functions run only when the component unmounts or before re-running the effect. If the component stays mounted, cleanup won't run.

📝 Syntax

advanced

Which option correctly uses useEffect to fetch data only once?

Which code snippet correctly fetches data only once when the component mounts?

A useEffect(fetchData, []);

B useEffect(() => { fetchData(); });

C useEffect(() => { fetchData(); }, [fetchData]);

D useEffect(() => { fetchData(); }, []);

💡 Hint

Consider how dependency arrays control effect execution.

Option D runs fetchData once on mount because of the empty dependency array. Option D runs on every render. Option D runs when fetchData changes (usually every render if not memoized). Option D passes fetchData directly, which is not a function call and may cause unexpected behavior.

🧠 Conceptual

expert

What happens if you update state inside useEffect without dependencies?

Consider this React component:

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

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

  useEffect(() => {
    setCount(count + 1);
  });

  return <div>Count: {count}</div>;
}

What will happen when this component renders?

React

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

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

  useEffect(() => {
    setCount(count + 1);
  });

  return <div>Count: {count}</div>;
}

A The count will stay at 0 because useEffect does not run.

B The count will increment once and stop.

C The component will enter an infinite render loop and crash.

D The component will render twice and then stop.

💡 Hint

Think about what happens when state updates trigger re-renders inside useEffect with no dependencies.

Without a dependency array, useEffect runs after every render. Updating state inside it causes another render, triggering useEffect again, causing an infinite loop.