Updating state in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ state_output

intermediate

What is the output after clicking the button twice?

Consider this React component that updates state on button clicks.

import React, { useState } from 'react';

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

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

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

What will the button display after clicking it twice?

React

import React, { useState } from 'react';

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

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

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

A Count: 2 after first click, Count: 4 after second click

B Count: 1 after first click, Count: 1 after second click

C Count: 1 after first click, Count: 2 after second click

D Count: 0 after first click, Count: 0 after second click

💡 Hint

Remember that React batches state updates and the count variable does not update immediately inside the same function call.

Both setCount(count + 1) calls use the same count value because state updates are asynchronous and batched. So the count increases by 1 per click, not 2.

❓ component_behavior

intermediate

Which option correctly increments state twice in one event?

How can you update React state twice in one event handler so that the state increments by 2?

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

function handleClick() {
  // update state twice here
}

React

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

function handleClick() {
  // update state twice here
}

A

setCount(prev => count + 1);
setCount(prev => count + 1);

B

setCount(count + 1);
setCount(count + 1);

C setCount(count + 2);

D

setCount(prev => prev + 1);
setCount(prev => prev + 1);

💡 Hint

Use the updater function form of setCount to get the latest state value.

Using setCount(prev => prev + 1) twice correctly increments the state twice because each updater receives the latest state value.

🔧 Debug

advanced

Why does this state update not work as expected?

Look at this React component:

function Example() {
  const [text, setText] = useState('');

  function handleChange(e) {
    setText(e.target.value);
    console.log(text);
  }

  return <input value={text} onChange={handleChange} />;
}

Why does console.log(text) always log the previous value, not the current input?

React

function Example() {
  const [text, setText] = useState('');

  function handleChange(e) {
    setText(e.target.value);
    console.log(text);
  }

  return <input value={text} onChange={handleChange} />;
}

A Because console.log is called before setText is defined.

B Because state updates are asynchronous and the logged value is stale inside the event handler.

C Because the input value is not controlled properly and does not update.

D Because e.target.value is undefined in this context.

💡 Hint

Think about when React updates state and when the console.log runs.

React state updates do not happen immediately. The text variable inside the handler still holds the old value when console.log runs.

📝 Syntax

advanced

Which code correctly updates nested state immutably?

Given this React state:

const [user, setUser] = useState({ name: 'Alice', address: { city: 'NY' } });

Which option correctly updates the city to 'LA' without mutating the original state?

React

const [user, setUser] = useState({ name: 'Alice', address: { city: 'NY' } });

A setUser({ ...user, address: { city: 'LA' } });

B user.address.city = 'LA'; setUser(user);

C setUser({ name: 'Alice', address: { city: 'LA' } });

D setUser(prev => { prev.address.city = 'LA'; return prev; });

💡 Hint

Remember to create new objects for nested state to avoid mutation.

Option A creates a new user object and a new address object with the updated city, preserving immutability.

Options B and D mutate the existing state object, which is bad practice and can cause bugs.

Option A replaces the whole user object but hardcodes the name, which is less flexible.

🧠 Conceptual

expert

What happens if you call setState with the same value as current state?

In React, if you call setState (or setCount) with the same value as the current state, what will React do?

A React will skip re-rendering the component to optimize performance.

B React will always re-render the component regardless of state value.

C React will throw an error because state cannot be set to the same value.

D React will reset the state to its initial value.

💡 Hint

Think about React's optimization to avoid unnecessary work.

React compares the new state with the current state using Object.is. If they are the same, React skips re-rendering to improve performance.