Multiple state variables in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ state_output

intermediate

What is the output of this React component?

Consider this React component using multiple state variables. What will be displayed when the button is clicked once?

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const [label, setLabel] = useState('Clicks');

  function handleClick() {
    setCount(count + 1);
    if (count === 1) {
      setLabel('Click');
    }
  }

  return (
    <div>
      <p>{count} {label}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default Counter;

A 1 Clicks

B 1 Click

C 0 Clicks

D 0 Click

💡 Hint

Remember that state updates are asynchronous and batch together in React.

When the button is clicked, setCount(count + 1) schedules an update. However, count still holds the old value (0) during this function call. So the if condition checks count === 1 which is false, so setLabel('Click') is not called. React batches the update and the component re-renders after the function finishes, showing 1 Clicks.

❓ component_behavior

intermediate

Which option correctly updates two state variables independently?

You want to update two separate state variables in a React functional component. Which code snippet correctly updates both without overwriting?

A setCount(count + 1); setLabel('Clicked');

B setState({count: count + 1, label: 'Clicked'});

C setCount(count + 1, setLabel('Clicked'));

D setCount(count + 1); setCount(label);

💡 Hint

Remember that useState returns separate setters for each state variable.

In React, each useState call manages its own state variable and provides a setter function. To update two separate states, call each setter independently. Option A correctly calls setCount and setLabel separately. Option A tries to update both states with one setter, which is invalid because useState does not merge state objects. Option A passes two arguments to setCount, which only accepts one. Option A calls setCount twice, overwriting the count state and misusing the label value.

📝 Syntax

advanced

What error does this React code produce?

Examine this React component snippet. What error will it cause?

React

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [label, setLabel] = useState('Clicks');

  function update() {
    setCount(count + 1)
    setLabel('Clicked')
  }

  return (
    <div>
      <p>{count} {label}</p>
      <button onClick={update}>Update</button>
    </div>
  );
}

export default Example;

A SyntaxError due to missing semicolons

B ReferenceError: count is not defined

C TypeError: setCount is not a function

D No error, runs correctly

💡 Hint

Check if missing semicolons cause errors in JavaScript.

JavaScript allows omitting semicolons in many cases due to automatic semicolon insertion. The code is syntactically valid and runs correctly. The state setters are functions returned by useState. There is no reference error because count is defined in the component scope.

🔧 Debug

advanced

Why does this React component not update the label on button click?

Look at this React component. Clicking the button updates the count but the label never changes. Why?

React

import React, { useState } from 'react';

function Clicker() {
  const [count, setCount] = useState(0);
  const [label, setLabel] = useState('Clicks');

  function handleClick() {
    setCount(count + 1);
    if (count === 0) {
      setLabel('Click');
    }
  }

  return (
    <div>
      <p>{count} {label}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default Clicker;

A handleClick function is not bound to component

B Directly assigning to label variable does not update state

C setCount is asynchronous so label update is skipped

D useState hook is missing for label

💡 Hint

How do you update state variables in React?

In React, state variables must be updated using their setter functions. Directly assigning to the state variable like label = 'Click' only changes the local variable and does not trigger a re-render. The correct way is to call setLabel('Click'). Option B is incorrect because asynchronous updates do not skip code lines. Option B is wrong because useState is used for label. Option B is irrelevant because functional components do not require binding.

🧠 Conceptual

expert

How does React batch multiple state updates in functional components?

In React 19+, when multiple state setters are called inside one event handler, how does React handle these updates?

A React merges all state variables into one object and updates it atomically

B React immediately re-renders after each state setter call

C React batches all state updates and applies them together before re-rendering once

D React ignores all but the last state setter call in the event handler

💡 Hint

Think about performance and how React avoids unnecessary renders.

React batches multiple state updates inside event handlers to optimize performance. It collects all updates and applies them together, causing only one re-render. This avoids multiple renders that would slow down the app. React does not merge separate state variables automatically (option C). It does not re-render after each setter call (option C), nor ignore updates (option C).