useState hook introduction 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 using the useState hook. What will be the displayed count after clicking the button two times?

React

import React, { useState } from 'react';

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

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

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

export default Counter;

A Count: 3

B Count: 1

C Count: 2

D Count: 0

💡 Hint

Remember that each click increases the count by 1 starting from 0.

The initial count is 0. Each click calls setCount(count + 1), increasing count by 1. After two clicks, count becomes 2.

❓ state_output

intermediate

What is the value of count after this sequence?

Given this React component, what is the value of count after the button is clicked once?

React

import React, { useState } from 'react';

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

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

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

export default Counter;

A Count: 1

B Count: 0

C Count: NaN

D Count: undefined

💡 Hint

The updater function uses the previous count value.

The updater function increments the previous count by 1. Starting from 0, after one click, count becomes 1.

📝 Syntax

advanced

Which option correctly initializes state with useState?

Which of these options correctly initializes a state variable name with the value 'Alice' using the useState hook?

A const name = useState('Alice');

B const [name, setName] = useState('Alice');

C const [name, setName] = useState = 'Alice';

D const [name, setName] = useState('Alice')()

💡 Hint

Remember that useState returns an array with two elements.

Option B correctly uses array destructuring to get the state and setter from useState. Other options have syntax errors or misuse the hook.

🔧 Debug

advanced

Why does this component not update the count on button click?

This React component uses useState but the count does not increase when the button is clicked. What is the cause?

React

import React, { useState } from 'react';

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

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

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

export default Counter;

A useState is not imported correctly.

B The button's onClick handler is missing parentheses.

C The initial state value must be a function.

D Directly modifying 'count' does not update state; setCount must be used.

💡 Hint

State variables are read-only; you must use the setter function.

State variables from useState cannot be changed directly. You must call setCount to update the state and trigger a re-render.

🧠 Conceptual

expert

What happens if you call setState multiple times synchronously?

In React, if you call setCount(count + 1) three times in a row inside one function, what will be the final value of count assuming initial value 0?

React

import React, { useState } from 'react';

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

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

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

export default Counter;

A Count will be 1 because state updates are batched and use the same initial count value.

B Count will be 3 because each setCount adds 1.

C Count will be 0 because setCount calls cancel each other.

D Count will be NaN due to multiple updates.

💡 Hint

State updates inside event handlers are batched and use the current state value at the time of the event.

All three setCount calls use the same 'count' value (0) and set it to 1. To increment correctly multiple times, use the functional updater form.