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.