Dependency array usage in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when useEffect has an empty dependency array?

Consider this React component:

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

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

  useEffect(() => {
    console.log('Effect runs');
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

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

What will be the behavior of this component regarding the console logs and count updates?

React

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

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

  useEffect(() => {
    console.log('Effect runs');
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

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

A The effect runs after every render, logging 'Effect runs' every second, and count increments every second.

B The effect runs only once after the first render, logging 'Effect runs' once, and count increments every second.

C The effect never runs because the dependency array is empty, so count never increments.

D The effect runs once but the count does not update because setCount is not called.

💡 Hint

Think about what an empty dependency array means for useEffect.

An empty dependency array means the effect runs only once after the first render. The setInterval inside updates the count every second, so the count increments continuously. The console.log runs once.

❓ state_output

intermediate

What is the value of count after 3 seconds?

Given this React component:

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

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

  useEffect(() => {
    const timer = setTimeout(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearTimeout(timer);
  }, [count]);

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

What will be the value of count after 3 seconds?

React

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

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

  useEffect(() => {
    const timer = setTimeout(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearTimeout(timer);
  }, [count]);

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

A 0

B 1

C 3

D Infinite loop causing crash

💡 Hint

The effect runs every time count changes, scheduling a new timeout.

The effect runs after every count update, scheduling a timeout to increment count after 1 second. After 3 seconds, count increments 3 times to 3.

📝 Syntax

advanced

Which option causes a syntax error in useEffect dependency array?

Which of these useEffect hooks has a syntax error in the dependency array?

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

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

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

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

💡 Hint

Check how the dependency array is passed as the second argument.

The dependency array must be a single array argument. Option D passes two separate arguments after the function, causing a syntax error.

🔧 Debug

advanced

Why does this useEffect run infinitely?

Look at this React component:

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

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(json => setData(json));
  }, [data]);

  return <div>{data ? 'Loaded' : 'Loading...'}</div>;
}

Why does the useEffect run infinitely?

React

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

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(json => setData(json));
  }, [data]);

  return <div>{data ? 'Loaded' : 'Loading...'}</div>;
}

A Because data changes on every fetch, triggering useEffect again and again.

B Because fetch is called without await causing a syntax error.

C Because useEffect has no dependency array, so it runs infinitely.

D Because setData is called with the same value, so React re-renders infinitely.

💡 Hint

Think about what happens when data changes and triggers the effect again.

The effect depends on data. When data changes after fetch, useEffect runs again, fetching again, causing an infinite loop.

🧠 Conceptual

expert

Which dependency array usage prevents stale closures in useEffect?

You want to use a value inside useEffect that updates over time without causing infinite loops. Which dependency array usage is correct?

Assume value changes frequently and you want to log it inside useEffect without stale data or infinite loops.

A useEffect(() => { console.log(value); }, [value]);

B useEffect(() => { console.log(value); });

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

D useEffect(() => { const val = value; console.log(val); }, []);

💡 Hint

Think about how React tracks dependencies to avoid stale data.

Including value in the dependency array ensures useEffect runs whenever value changes, preventing stale closures. Empty or missing dependencies cause stale or repeated effects.

Practice

1. What does an empty dependency array [] in a useEffect hook mean?

easy

A. The effect runs only when a state changes.

B. The effect runs after every render.

C. The effect never runs.

D. The effect runs only once after the first render.

Solution

1. Step 1: Understand the role of dependency array

   The dependency array tells React when to run the effect based on changes in listed variables.

2. Step 2: Interpret empty array meaning

   An empty array means no variables to watch, so React runs the effect only once after the first render.

3. Final Answer:

   The effect runs only once after the first render. -> Option D

4. Quick Check:

   Empty array = run once [OK]

Hint: Empty array means run effect once after mount [OK]

Common Mistakes:

• Thinking empty array runs effect every render
• Confusing empty array with no array
• Assuming effect never runs with empty array

2. Which of the following is the correct syntax for a useEffect hook that runs only once after the component mounts?

easy

A. useEffect(() => { console.log('Hello'); });

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

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

D. useEffect(() => { console.log('Hello'); }, [() => {}]);

Solution

1. Step 1: Identify correct useEffect syntax

   The second argument is the dependency array controlling when the effect runs.

2. Step 2: Check which option uses empty array

   useEffect(() => { console.log('Hello'); }, []); uses an empty array, so effect runs once after mount, which is correct.

3. Final Answer:

   useEffect(() => { console.log('Hello'); }, []); -> Option B

4. Quick Check:

   Empty array syntax = useEffect(() => { console.log('Hello'); }, []); [OK]

Hint: Empty array in second argument runs effect once [OK]

Common Mistakes:

• Omitting dependency array runs effect every render
• Using non-constant values in dependency array incorrectly
• Confusing dependency array with effect callback

3. Consider this code:

const [count, setCount] = useState(0);
useEffect(() => {
  console.log('Count is', count);
}, [count]);

setCount(1);
setCount(2);

What will be logged to the console?

medium

A. Count is 0, Count is 2

B. Count is 0 only

C. Count is 2 only

D. Count is 0, Count is 1, Count is 2

Solution

1. Step 1: Understand effect dependency on count

   The effect runs after first render (count=0) and whenever count changes.

2. Step 2: Analyze state updates

   Two state updates happen quickly: setCount(1) then setCount(2). React batches them, so only final count=2 triggers effect after initial render.

3. Final Answer:

   Count is 0, Count is 2 -> Option A

4. Quick Check:

   Effect runs on initial and final count change [OK]

Hint: Effect runs after render with latest dependency value [OK]

Common Mistakes:

• Assuming effect runs for every intermediate state update
• Ignoring batching of state updates
• Thinking effect runs before first render

4. What is wrong with this useEffect usage?

const [count, setCount] = useState(0);
useEffect(() => {
  console.log(count);
}, []);

medium

A. Effect will run only once and log initial count, ignoring updates.

B. Effect will never run because dependency array is empty.

C. Effect will run on every render causing infinite loop.

D. Syntax error due to missing dependencies.

Solution

1. Step 1: Check dependency array usage

   Empty array means effect runs once after first render only.

2. Step 2: Understand effect behavior with state

   Effect logs count only once with initial value, ignoring later count changes.

3. Final Answer:

   Effect will run only once and log initial count, ignoring updates. -> Option A

4. Quick Check:

   Empty array ignores state changes [OK]

Hint: Empty array ignores state changes inside effect [OK]

Common Mistakes:

• Thinking effect runs on every count change
• Assuming empty array stops effect from running
• Confusing syntax error with logical error

5. You have a useEffect that depends on two props: userId and filter. Which dependency array is correct to ensure the effect runs only when these props change?

useEffect(() => {
  fetchData(userId, filter);
}, ???);

hard

A. []

B. [fetchData]

C. [userId, filter]

D. [userId]

Solution

1. Step 1: Identify variables used inside effect

   The effect uses userId and filter inside its callback.

2. Step 2: List all used variables in dependency array

   To rerun effect when either userId or filter changes, both must be in the dependency array.

3. Final Answer:

   [userId, filter] -> Option C

4. Quick Check:

   List all used variables in dependencies [OK]

Hint: Include all used variables in dependency array [OK]

Common Mistakes:

• Leaving dependency array empty causing stale data
• Including functions that don't change as dependencies
• Listing only some used variables