Updating state in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the useState hook in React?

The useState hook lets you add state to functional components. It returns a state variable and a function to update it.

intermediate

How do you update state based on the previous state in React?

You pass a function to the state updater that receives the previous state and returns the new state. This ensures you work with the latest state.

beginner

Why should you never modify state variables directly in React?

Directly changing state variables can cause bugs because React won't know the state changed and won't update the UI properly.

beginner

What happens when you call the state updater function returned by useState?

React schedules a re-render of the component with the new state value, updating the UI to reflect the change.

intermediate

How can you update multiple state variables in React?

You call each state updater function separately. Each call schedules a re-render with the updated state values.

What does the useState hook return?

A A component and a state variable

B Only a state variable

C Only a function to update state

D A state variable and a function to update it

The useState hook returns an array with the current state and a function to update that state.

How do you update state based on the previous state?

A Call the updater with no arguments

B Directly modify the state variable

C Pass a function to the updater that receives previous state

D Use a global variable

Passing a function to the updater ensures you get the latest previous state to calculate the new state.

What happens if you modify state directly without using the updater?

A React may not re-render the component

B The UI updates immediately

C State resets to initial value

D An error is thrown

React relies on the updater function to know when to re-render. Direct changes are ignored.

Which of these is the correct way to update a counter state?

A Both C and D

B count = count + 1

C setCount(prev => prev + 1)

D setCount(count + 1)

Both calling setCount with count + 1 or with a function updating previous state are valid ways.

Can you update multiple state variables at once with one updater function?

A Yes, by passing an object to one updater

B No, call each updater separately

C Yes, by modifying state directly

D No, React supports only one state variable

Each state variable has its own updater function; you call each one separately to update multiple states.

Explain how to update state in React using the useState hook.

Think about how you tell React to change something and show it again.

Why is it important to avoid modifying state variables directly in React?

Imagine changing something behind React's back.

Practice

1. What is the correct way to update a state variable count using the useState hook in React?

easy

A. Call the setter function like setCount(newValue) to update the state.

B. Directly assign a new value like count = newValue.

C. Use this.setState({ count: newValue }) inside the component.

D. Update the state by returning a new value from the component function.

Solution

1. Step 1: Understand how useState works

   The useState hook returns a pair: the current state and a function to update it.

2. Step 2: Use the setter function to update state

   To change the state, you must call the setter function with the new value, e.g., setCount(newValue).

3. Final Answer:

   Call the setter function like setCount(newValue) to update the state. -> Option A

4. Quick Check:

   Update state with setter function = A [OK]

Hint: Always use the setter function from useState to update state [OK]

Common Mistakes:

• Trying to assign state variable directly
• Using class component syntax in functional components
• Returning new value instead of calling setter

2. Which of the following is the correct syntax to initialize a state variable name with value "John" using useState?

easy

A. const name = useState('John');

B. const name = useState('John')[0];

C. const [name, setName] = useState('John');

D. const {name, setName} = useState('John');

Solution

1. Step 1: Recall useState returns an array

   The useState hook returns an array with two elements: the state variable and the setter function.

2. Step 2: Use array destructuring to get both

   Use array destructuring syntax: const [name, setName] = useState('John'); to get both the value and setter.

3. Final Answer:

   const [name, setName] = useState('John'); -> Option C

4. Quick Check:

   useState returns [state, setter] array = B [OK]

Hint: Use array destructuring to get state and setter from useState [OK]

Common Mistakes:

• Assigning useState result directly without destructuring
• Using object destructuring instead of array
• Only taking the first element without setter

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

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
  };
  return (
    <>
      
{count}
      Increment
    </>
  );
}

medium

A. 2

B. 0

C. Error

D. 1

Solution

1. Step 1: Understand state updates are asynchronous and batched

   Both setCount(count + 1) calls use the same count value (0) because state updates are batched.

2. Step 2: Result after both calls

   Both calls set count to 1, so after clicking, count becomes 1, not 2.

3. Final Answer:

   1 -> Option D

4. Quick Check:

   Multiple setState with same value = C [OK]

Hint: Multiple setState calls with same value batch to last one [OK]

Common Mistakes:

• Assuming count increments twice immediately
• Expecting count to be 2 after two calls
• Ignoring React's batching behavior

4. Identify the error in the following React component that tries to update state on button click:

import React, { useState } from 'react';

function Toggle() {
  const [isOn, setIsOn] = useState(false);
  function handleClick() {
    isOn = !isOn;
  }
  return {isOn ? 'ON' : 'OFF'};
}

medium

A. Button missing onClick handler.

B. Directly assigning to state variable instead of using setter.

C. Using incorrect initial state value.

D. Missing parentheses in function declaration.

Solution

1. Step 1: Check how state is updated

   The code tries to assign isOn = !isOn; directly, which is not allowed for state variables.

2. Step 2: Correct way to update state

   State must be updated by calling the setter function: setIsOn(!isOn);.

3. Final Answer:

   Directly assigning to state variable instead of using setter. -> Option B

4. Quick Check:

   Update state only via setter function = D [OK]

Hint: Never assign state variable directly; always use setter [OK]

Common Mistakes:

• Assigning state variable directly
• Forgetting to call setter function
• Confusing state variable with setter

5. You want to update a state object user with a new age property without losing other properties. Which is the correct way to update state using setUser?

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

// Update age to 26

hard

A. setUser(prevUser => ({ ...prevUser, age: 26 }));

B. setUser({ age: 26 });

C. setUser(user.age = 26);

D. setUser(prevUser => { prevUser.age = 26 });

Solution

1. Step 1: Preserve existing properties when updating state object

   To update one property without losing others, copy previous state using spread syntax.

2. Step 2: Use functional update form to get latest state

   Use setUser(prevUser => ({ ...prevUser, age: 26 })) to merge old properties with new age.

3. Final Answer:

   setUser(prevUser => ({ ...prevUser, age: 26 })); -> Option A

4. Quick Check:

   Use spread and functional update to merge state = A [OK]

Hint: Use spread operator and functional setter to update object state [OK]

Common Mistakes:

• Replacing whole object losing other properties
• Mutating state directly instead of returning new object
• Not using functional update when depending on previous state