Callback functions for state updates in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output after clicking the button twice?

Consider this React component that updates state using a callback function:

import React, { useState } from 'react';

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

  function increment() {
    setCount(prevCount => prevCount + 1);
  }

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

If the user clicks the button twice quickly, what will be the displayed count?

React

import React, { useState } from 'react';

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

  function increment() {
    setCount(prevCount => prevCount + 1);
  }

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

A Count: NaN

B Count: 1

C Count: 0

D Count: 2

💡 Hint

Think about how React batches state updates and how the callback function uses the previous state.

Using a callback function with setCount ensures each update uses the latest state value. Clicking twice quickly will increment count twice, resulting in 2.

📝 Syntax

intermediate

Which option correctly uses a callback to update state based on previous value?

Choose the correct way to update a React state variable score by adding 5 using a callback function.

A setScore(prevScore => prevScore + 5);

B setScore(() => score + 5);

C setScore(score + 5);

D setScore(prevScore + 5);

💡 Hint

Remember the callback receives the previous state as an argument.

Option A correctly uses a callback function that takes prevScore and returns the new value. Others either use the current state directly or have syntax errors.

🔧 Debug

advanced

Why does this state update not increment as expected?

Look at this React component:

function Clicker() {
  const [clicks, setClicks] = React.useState(0);

  function handleClick() {
    setClicks(clicks + 1);
    setClicks(clicks + 1);
  }

  return (
    <button onClick={handleClick}>Clicks: {clicks}</button>
  );
}

After clicking the button once, what is the value of clicks and why?

React

function Clicker() {
  const [clicks, setClicks] = React.useState(0);

  function handleClick() {
    setClicks(clicks + 1);
    setClicks(clicks + 1);
  }

  return (
    <button onClick={handleClick}>Clicks: {clicks}</button>
  );
}

A Clicks: 2 because setClicks is called twice

B Clicks: 1 because both setClicks use the same stale clicks value

C Clicks: 0 because state does not update on click

D Clicks: NaN due to invalid state update

💡 Hint

Consider how React batches state updates and the value of clicks inside the function.

Both setClicks calls use the same clicks value from closure (stale). So state updates to 1, not 2.

❓ component_behavior

advanced

What will be the final count after these updates?

Given this React component:

function MultiIncrement() {
  const [count, setCount] = React.useState(0);

  function incrementThrice() {
    setCount(c => c + 1);
    setCount(c => c + 1);
    setCount(c => c + 1);
  }

  return (
    <button onClick={incrementThrice}>Count: {count}</button>
  );
}

What will the count show after clicking the button once?

React

function MultiIncrement() {
  const [count, setCount] = React.useState(0);

  function incrementThrice() {
    setCount(c => c + 1);
    setCount(c => c + 1);
    setCount(c => c + 1);
  }

  return (
    <button onClick={incrementThrice}>Count: {count}</button>
  );
}

A Count: 3

B Count: NaN

C Count: 0

D Count: 1

💡 Hint

Each callback receives the updated state from the previous callback.

Using callback functions ensures each update adds 1 to the latest state, so three calls add 3 total.

🧠 Conceptual

expert

Why prefer callback functions for state updates in React?

Which reason best explains why React recommends using callback functions with setState when new state depends on previous state?

A Callback functions automatically debounce rapid state changes

B Callback functions prevent unnecessary re-renders by skipping updates

C Callback functions ensure updates use the latest state value despite batching

D Callback functions allow direct mutation of state for performance

💡 Hint

Think about how React batches multiple state updates asynchronously.

React batches state updates, so the state variable might be stale inside event handlers. Callback functions get the latest state value to avoid bugs.