Multiple state variables in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of using multiple state variables in a React functional component?

Using multiple state variables helps keep different pieces of data separate and easier to manage. Each state variable can track a specific value, making the component simpler and clearer.

beginner

How do you declare multiple state variables in a React functional component?

You call the useState hook multiple times, each time for a different piece of state. For example: const [count, setCount] = useState(0); const [name, setName] = useState('');

intermediate

Why is it better to use multiple useState calls instead of one big state object?

Using multiple useState calls keeps state updates simple and focused. It avoids unnecessary re-renders and makes the code easier to read and maintain.

intermediate

What happens when you update one state variable using useState in React?

Only the component parts that depend on that state variable will re-render. Other state variables remain unchanged and do not cause extra re-renders.

beginner

Show a simple example of a React component using two state variables.

import React, { useState } from 'react';

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <input value={text} onChange={e => setText(e.target.value)} placeholder="Type here" />
    </div>
  );
}

How do you declare two separate state variables in a React functional component?

A Call useState twice, once for each variable

B Use one useState call with an array

C Use one useState call with an object

D Declare variables without useState

Each call to useState creates a separate state variable. This keeps state management simple and clear.

What happens when you update one state variable using useState?

A No re-render happens

B All state variables reset to initial values

C The entire app reloads

D Only the component parts using that state re-render

React re-renders the component parts that depend on the updated state variable to keep UI in sync.

Why might you prefer multiple useState calls over one state object?

A Because React does not support objects in state

B To keep updates simple and avoid unnecessary re-renders

C To reduce the number of variables

D To make the code longer

Multiple useState calls help isolate state updates and improve code clarity and performance.

Which hook is used to create state variables in React functional components?

A useState

B useEffect

C useContext

D useRef

useState is the React hook designed to add state to functional components.

If you have a count and a name state, how do you update the name?

A Call setCount with the new value

B Change the name variable directly

C Call setName with the new value

D Use useEffect to update name

Each state variable has its own setter function, like setName for name.

Explain how to manage multiple pieces of state in a React functional component and why it is useful.

Think about how you keep different things organized in real life.

Describe what happens in React when you update one of several state variables in a component.

Imagine changing one part of a machine without stopping the whole machine.