This is how state updates work in React!

Think of state as a variable that contains the data our component needs to remember, and setState() as a function that updates that variable.

Basic Example to Set Up Foundations

const [students, setStudents] = useState(0);        

In this example, students is the state which our component needs to remember across re-renders, and setStudents is the function that will help us update this state.

Misconception About How State Updates Work

Let's update the state using the state setter when a button is clicked and see how state updates work:

<button onClick={() => {
 setStudents(students + 1);
 setStudents(students + 1);
 setStudents(students + 1);
 setStudents(students + 1);
 }}>+4</button>        

What is the value students is going to hold after these four state update calls?

Many expect the state to hold the value 4, thinking it updates like this:

• setStudents(0 + 1) // --> 1
• setStudents(1 + 1) // --> 2
• setStudents(2 + 1) // --> 3
• setStudents(3 + 1) // --> 4

So, the expected result is 4. However, this is one of the kinds of expectations that hurts. This is not how state updates work in React!

How State Updates Actually Work

There are two key points that are going to help you a lot in understanding how state updates actually work:

State value never changes within a render.

setState only changes state for the next render.

With these points in mind, let's re-evaluate the state updates:

Since the state value remains fixed within one render, in this particular render students is always going to hold 0. Thus, the four consecutive updates are processed like this:

• setStudents(0 + 1) // --> 1 State is set to be updated to 1 on next render
• setStudents(0 + 1) // --> 1 State is set to be updated to 1 on next render
• setStudents(0 + 1) // --> 1 State is set to be updated to 1 on next render
• setStudents(0 + 1) // --> 1 State is set to be updated to 1 on next render

The result is 1, instead of 4, because the students state is always holding 0 within the current render, no matter how many times you update it.

But what if we want to update the state multiple times within one render? That is possible too, let's get to know how!

Updating State Multiple Times Within a Render

To update state multiple times within a render, we can use an updater function with the state setter. Here’s how it is done:

setStudents(s => s + 1);        

Here, s => s + 1 is called the updater function. The updater function tells React to update the state based on the previous state.

Updater function tells React to update state using the most recent state value, allowing multiple updates within the same render cycle to work correctly.

This code now updates the state using the previous value each time:

<button onClick={() => {
 setStudents(s => s + 1);
 setStudents(s => s + 1);
 setStudents(s => s + 1);
 setStudents(s => s + 1);
 }}>+4</button>        

The updates are processed using the previous value of state each time as follows:

• setStudents(0 => 0+ 1) // ---> 1
• setStudents(1 => 1 + 1) // ---> 2
• setStudents(2 => 2 + 1) //--->3
• setStudents(3=> 3 + 1) // ---> 4

The final students value is 4, contrary to what we observed with state updates without the updater function.

Summary

• State values do not change within the same render and are only updated for the next render.
• Using an updater function ensures state updates correctly reflect multiple changes within a render.

Understanding these fundamental concepts about React State Updates helps prevent unintended results and ensures your React components behave as expected.

Happy coding!