What is state in React - Practice Questions & Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component?

Consider this React component that uses state. What will be displayed when the button is clicked once?

React

import React, { useState } from 'react';

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

export default Counter;

A Count: 1

B Count: 0

C Count: undefined

D Count: NaN

💡 Hint

Think about what happens when the button's onClick updates the state from 0 to 1.

The initial state count is 0. When the button is clicked, setCount(count + 1) updates it to 1. The component re-renders showing Count: 1.

❓ state_output

intermediate

What is the value of count after two button clicks?

Given this React component, what will be the value of count after clicking the button twice quickly?

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
  };
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase Twice</button>
    </>
  );
}

export default Counter;

A Count: 0

B Count: 2

C Count: 1

D Count: NaN

💡 Hint

Remember that state updates may be batched and the count variable does not update immediately inside the function.

Both setCount(count + 1) calls use the same count value (0). So the state updates to 1, not 2.

📝 Syntax

advanced

Which option correctly initializes state with an object in React?

You want to store a user's name and age in state as an object. Which code correctly initializes this state?

React

import React, { useState } from 'react';

function UserInfo() {
  // Initialize state here
  return null;
}

export default UserInfo;

A const [user, setUser] = useState({ name: 'Alice', age: 30 });

B const [user, setUser] = useState(['Alice', 30]);

C const [user, setUser] = useState('name: Alice, age: 30');

D const [user, setUser] = useState(name = 'Alice', age = 30);

💡 Hint

State should be initialized with a single value, often an object or primitive, not multiple separate variables.

Option A correctly uses an object literal to initialize state. Options A and C use wrong types, and D is invalid syntax.

🔧 Debug

advanced

Why does this React component not update the displayed count?

Look at this React component. Why does clicking the button not change the displayed count?

React

import React, { useState } from 'react';

function Counter() {
  let count = 0;
  const handleClick = () => {
    count = count + 1;
  };
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </>
  );
}

export default Counter;

A Because useState is missing, causing a syntax error.

B Because count is a local variable, React does not track changes to it for re-rendering.

C Because the button's onClick handler is not correctly bound to the component.

D Because count is declared with let, it cannot be updated inside the function.

💡 Hint

React only re-renders when state or props change, not when local variables change.

Local variables like count do not cause React to re-render. State must be used to trigger updates.

🧠 Conceptual

expert

What is the main purpose of state in React components?

Choose the best description of what state is used for in React components.

A State is only used to store event handler functions inside components.

B State is used to store static configuration values that never change.

C State is a global variable accessible by all components without passing props.

D State stores data that changes over time and affects what the component displays.

💡 Hint

Think about what changes in a component cause it to update its display.

State holds data that can change and causes the component to update its output. It is local to the component and not global.