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).

Practice

1. In React, why would you use multiple state variables instead of one single state object?

easy

A. To keep different pieces of data separate and update them independently.

B. Because React only allows one state variable per component.

C. To make the component slower and harder to read.

D. To avoid using setter functions.

Solution

1. Step 1: Understand state separation

   Multiple state variables let you store different data separately, making updates easier and clearer.

2. Step 2: Recognize React's flexibility

   React allows many state variables, each with its own setter, improving organization and readability.

3. Final Answer:

   To keep different pieces of data separate and update them independently. -> Option A

4. Quick Check:

   Separate state variables = easier updates [OK]

Hint: Multiple states mean clearer, independent updates [OK]

Common Mistakes:

• Thinking React limits to one state variable
• Believing multiple states slow down components
• Confusing state variables with props

2. Which of the following is the correct way to declare two separate state variables in a React functional component?

easy

A. const [count, setCount] = useState(0); const [name, setName] = useState('');

B. const state = useState({count: 0, name: ''});

C. const count = useState(0); const name = useState('');

D. useState(count, 0); useState(name, '');

Solution

1. Step 1: Check syntax for multiple states

   Each state variable uses its own useState call with array destructuring for value and setter.

2. Step 2: Compare options

   const [count, setCount] = useState(0); const [name, setName] = useState(''); correctly declares two separate states with their setters. Others misuse useState or syntax.

3. Final Answer:

   const [count, setCount] = useState(0); const [name, setName] = useState(''); -> Option A

4. Quick Check:

   Separate useState calls = correct syntax [OK]

Hint: Use separate useState calls with array destructuring [OK]

Common Mistakes:

• Trying to declare multiple states in one useState call without destructuring
• Missing setter functions
• Incorrect useState syntax

3. What will be the output of this React component when the button is clicked once?

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('Hello');

  function handleClick() {
    setCount(count + 1);
    setText(text + '!');
  }

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

medium

A. Count: 0 and Text: Hello

B. Count: 0 and Text: Hello!

C. Count: 1 and Text: Hello!

D. Count: 1 and Text: Hello

Solution

1. Step 1: Understand state updates on click

   Clicking the button calls handleClick, which increments count by 1 and adds '!' to text.

2. Step 2: Check initial values and updates

   Initial count is 0, text is 'Hello'. After one click, count becomes 1, text becomes 'Hello!'.

3. Final Answer:

   Count: 1 and Text: Hello! -> Option C

4. Quick Check:

   State updates reflect in UI after click [OK]

Hint: Each setter updates its own state independently [OK]

Common Mistakes:

• Assuming states update asynchronously and show old values immediately
• Forgetting to update both states
• Mixing up initial and updated values

4. Identify the error in this React component using multiple state variables:

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  function update() {
    setCount(count + 1);
    setName = 'John';
  }

  return <button onClick={update}>Update</button>;
}

medium

A. Missing import of useState from React.

B. Not initializing count with a string.

C. Using semicolon after return statement.

D. Incorrect assignment to setName instead of calling it as a function.

Solution

1. Step 1: Check how state setters are used

   State setters like setName must be called as functions, e.g., setName('John').

2. Step 2: Identify the error in update function

   The code uses assignment setName = 'John' instead of calling setName('John'), which is incorrect.

3. Final Answer:

   Incorrect assignment to setName instead of calling it as a function. -> Option D

4. Quick Check:

   State setters must be called, not assigned [OK]

Hint: Call setters as functions, never assign them [OK]

Common Mistakes:

• Assigning value to setter instead of calling it
• Forgetting to import useState
• Misusing return syntax

5. You want to track a user's first name, last name, and age separately in a React component. Which approach best uses multiple state variables to keep the component organized and easy to update?

hard

A. Use one useState call with an object containing first name, last name, and age.

B. Use three separate useState calls: one for first name, one for last name, and one for age.

C. Use one useState call with an array containing first name, last name, and age.

D. Use three variables without useState since they don't change.

Solution

1. Step 1: Consider state clarity and updates

   Using separate state variables for each piece of data allows independent updates and clearer code.

2. Step 2: Compare with other options

   Use one useState call with an object containing first name, last name, and age. groups data but requires careful merging on updates. Use one useState call with an array containing first name, last name, and age. uses array which is less clear. Use three variables without useState since they don't change. ignores state management.

3. Final Answer:

   Use three separate useState calls: one for first name, one for last name, and one for age. -> Option B

4. Quick Check:

   Separate states = easier updates and clarity [OK]

Hint: Separate states for separate data pieces [OK]

Common Mistakes:

• Using one object state and forgetting to merge updates
• Using arrays for unrelated data
• Not using state for changing data