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.

Practice

1. Why should you use a callback function when updating state in React with useState?

easy

A. Because it safely uses the previous state value to calculate the new state.

B. Because it makes the component render twice automatically.

C. Because it prevents the component from updating.

D. Because it allows you to update multiple states at once.

Solution

1. Step 1: Understand state updates in React

   State updates can be asynchronous, so relying on the current state value directly can cause bugs.

2. Step 2: Use callback function to access previous state

   The callback function receives the previous state safely and returns the new state, ensuring correct updates.

3. Final Answer:

   Because it safely uses the previous state value to calculate the new state. -> Option A

4. Quick Check:

   Callback uses previous state = safe update [OK]

Hint: Use callback to get previous state safely for updates [OK]

Common Mistakes:

• Updating state directly without callback causes stale values
• Thinking callback triggers extra renders
• Believing callback merges multiple states automatically

2. Which of the following is the correct syntax to update state using a callback function with useState?

easy

A. setCount(count + 1);

B. setCount(prevCount => prevCount + 1);

C. setCount(() => count + 1);

D. setCount(prevCount + 1);

Solution

1. Step 1: Identify correct callback syntax

   The callback function receives previous state as an argument and returns the new state.

2. Step 2: Check each option

   setCount(prevCount => prevCount + 1); uses prevCount => prevCount + 1, which is the correct callback form.

3. Final Answer:

   setCount(prevCount => prevCount + 1); -> Option B

4. Quick Check:

   Callback syntax = setState(prev => new) [OK]

Hint: Callback syntax always uses previous state parameter [OK]

Common Mistakes:

• Passing new state directly without function
• Using arrow function without parameter
• Trying to add number outside callback

3. What will be the output after clicking the button twice in this React component?

function Counter() {
  const [count, setCount] = React.useState(0);
  function increment() {
    setCount(prev => prev + 1);
  }
  return (
    <button onClick={increment}>Count: {count}</button>
  );
}

medium

A. Count: 2

B. Count: NaN

C. Count: 0

D. Count: 1

Solution

1. Step 1: Understand initial state and increment function

   Initial count is 0. Each click calls increment which updates state by adding 1 to previous count.

2. Step 2: Calculate state after two clicks

   First click: 0 + 1 = 1. Second click: 1 + 1 = 2.

3. Final Answer:

   Count: 2 -> Option A

4. Quick Check:

   Two increments = count 2 [OK]

Hint: Each click adds 1 to previous count using callback [OK]

Common Mistakes:

• Assuming state updates are batched incorrectly
• Using stale count value without callback
• Expecting count to reset after each click

4. Identify the error in this React state update code:

const [value, setValue] = React.useState(0);
function update() {
  setValue(value + 1);
  setValue(value + 1);
}

medium

A. setValue cannot be called twice in one function.

B. Syntax error: missing callback function.

C. State updates will be batched and only increase by 1, not 2.

D. State will reset to 0 after update.

Solution

1. Step 1: Analyze multiple state updates with direct value

   Both calls use the same stale value (0), so both set to 1.

2. Step 2: Understand batching behavior

   React batches updates, so final state is 1, not 2.

3. Final Answer:

   State updates will be batched and only increase by 1, not 2. -> Option C

4. Quick Check:

   Direct state updates = stale value, batched result [OK]

Hint: Multiple direct updates use stale state, use callback instead [OK]

Common Mistakes:

• Thinking setValue calls add up automatically
• Believing syntax error occurs without callback
• Assuming state resets unexpectedly

5. You want to toggle a boolean state isOpen in React. Which is the best way to update it safely when the new state depends on the old state?

hard

A. setIsOpen(false);

B. setIsOpen(!isOpen);

C. setIsOpen(true);

D. setIsOpen(prev => !prev);

Solution

1. Step 1: Understand toggling boolean state

   Toggling means switching from true to false or false to true based on previous state.

2. Step 2: Choose callback to avoid stale state

   Using prev => !prev ensures the toggle uses the latest state safely.

3. Final Answer:

   setIsOpen(prev => !prev); -> Option D

4. Quick Check:

   Toggle boolean safely = callback with previous state [OK]

Hint: Toggle booleans with callback using previous state [OK]

Common Mistakes:

• Using direct negation causes stale state bugs
• Setting fixed true or false instead of toggling
• Not using callback for dependent state updates