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.