State Update Batching in Practice | Lecture 133 | React.JS 🔥

Summary

This video script delves into the intricacies of state updates in React, demonstrating how React batches state updates asynchronously for improved performance. Through practical examples and code snippets, it explores the behavior of state updates within event handlers, setTimeout functions, and the changes introduced in React 18 for automatic batching across different scenarios. The script provides a comprehensive understanding of when and how to use callback functions for setting state based on the previous state, ensuring safe and predictable updates. With a hands-on approach, it effectively showcases the power of React's state management and batching mechanisms.

Takeaways

• 😄 React batches multiple state updates into a single re-render to improve performance.
• 🤔 Using console.log('render') can demonstrate when components re-render due to state changes.
• ⏱️ State updates in React are asynchronous, so accessing the updated state immediately after setState() will return the previous state value.
• ✅ When updating state based on the previous state, always use the callback function form of setState() to ensure the correct state is accessed.
• 🔄 React will not re-render a component if the new state is identical to the current state.
• ⚡ In React 18, state updates are automatically batched, even for asynchronous operations like setTimeout() and promises.
• 👴 In React 17 and earlier versions, state updates in asynchronous operations were not batched automatically.
• 🔑 Understanding batched updates and the asynchronous nature of setState() is crucial for writing efficient and bug-free React applications.
• 📝 The provided script demonstrates several examples and scenarios to illustrate these concepts in action.
• 🚀 Mastering state management and updates is a fundamental skill for becoming a proficient React developer.

Q & A

What is the purpose of the `handleUndo` function?

The `handleUndo` function is implemented to reset the `showDetails` state to `true` and the `likes` state to `0`. It is used to undo the changes made to these two states.

How does React batch state updates, and how can this be proven?

React batches multiple state updates together and only triggers a single re-render. This can be proven by logging a string to the console within the component's render method. If only one log appears after multiple state updates, it means the updates were batched and triggered a single re-render.

Why does the `console.log` statement with 'render' only appear once when clicking the 'undo' button?

The 'render' log appears only once because the two state updates (`setShowDetails` and `setLikes`) were batched together, causing a single re-render of the component.

Why is the state updating asynchronous in React?

State updating is asynchronous in React because the state is not updated immediately after calling the state setter function. Instead, the state is updated during the re-rendering process, which happens after the state setter function is called.

Why is it recommended to use a callback function when updating state based on the previous state?

Using a callback function when updating state based on the previous state ensures that the state update is performed with the latest state value. This safeguards against potential issues caused by stale state values, especially when the component's logic changes or when the state update function is called in different contexts.

Why does the component not re-render when clicking the 'undo' button after the state has already been reset?

The component does not re-render because both the `showDetails` and `likes` states were already at their default values (`true` and `0`, respectively). Since the new state values were equal to the current state, React did not trigger a re-render.

What is the purpose of the `handleTripleInc` function?

The `handleTripleInc` function is intended to increase the `likes` state by 3 when clicking the 'Next' button with three plus signs.

Why does the `likes` state only increase by 1 when calling `setLikes` three times in the `handleTripleInc` function?

The `likes` state only increases by 1 because the state updates are still asynchronous, and the subsequent state updates are based on the previous (stale) state value, not the updated value.

How does using a callback function in `setLikes` solve the issue of only increasing the `likes` state by 1?

Using a callback function in `setLikes` allows access to the latest state value within the callback. This ensures that each subsequent state update is based on the most recent state value, enabling the `likes` state to increase by 3 as intended.

What is the difference between automatic batching in React 17 and React 18 when using `setTimeout`?

In React 17, automatic batching did not occur inside a `setTimeout` function, resulting in multiple re-renders. However, in React 18, batching occurs automatically in `setTimeout` and other asynchronous situations, leading to a single re-render.

Outlines

00:00

🔄 Exploring State Batching and Asynchronous Updates in React

This paragraph discusses how React batches state updates and how state updating is asynchronous. It demonstrates this by implementing an 'undo' button that resets two states, and using console logs to observe the rendering process. It shows that state updates are batched, causing only one component re-render, and that accessing the state immediately after updating it yields the previous value due to the asynchronous nature of state updates.

05:01

⬆️ Implementing a 'Triple Increment' State Update Function

The paragraph focuses on implementing a 'triple increment' functionality that increases the 'likes' state by 3 when a button is clicked. It highlights the importance of using a callback function when updating state based on the current state value. The callback function ensures that the latest state value is accessed, allowing for correct updates. Without the callback, the state remains stale, leading to incorrect updates.

10:02

🔒 Ensuring Reliable State Updates with Callback Functions

This paragraph emphasizes the importance of always using callback functions when updating state based on the current state value. It demonstrates scenarios where directly updating the state or calling the update function multiple times can lead to unexpected results. Using a callback function safeguards against such issues and ensures reliable state updates, even when code changes or other developers interact with the functions.

15:05

🕰️ Automatic Batching in React 18 Outside Event Handlers

The paragraph explores how React 18 introduced automatic batching of state updates even outside event handlers, such as in setTimeout functions. It implements a button that resets the state after a 2-second delay, demonstrating that the state updates are batched and cause only a single re-render. Additionally, it compares this behavior with React 17, where automatic batching did not occur in setTimeout, causing multiple re-renders.

Keywords

💡State

State refers to the internal data of a React component. It represents the current condition or properties that determine how the component will render and behave. In the video, the instructor demonstrates how React manages and updates the state of components, particularly through state variables like `showDetails` and `likes`. Updating the state triggers a re-render of the component, allowing the user interface to reflect the new data.

💡Batching

Batching is a mechanism in React that groups multiple state updates together and performs them in a single re-render cycle. This optimization technique helps improve performance by reducing unnecessary re-renders. The video illustrates how React batches state updates within event handlers, ensuring that multiple setState calls within the same event handler result in only one re-render. The instructor also discusses how React 18 introduced automatic batching for updates outside event handlers, such as setTimeout callbacks.

💡Asynchronous State Updates

In React, state updates are asynchronous, meaning that the new state value is not immediately available after calling the setState function. The video emphasizes this concept by demonstrating that attempting to access the state immediately after updating it will still return the previous (stale) value. To update state based on the current state, the instructor recommends using a callback function passed to setState, which provides access to the latest state value.

💡Re-rendering

Re-rendering is the process of React updating the component's rendered output based on changes to its state or props. The video demonstrates how console logging 'render' can be used to visualize when a component re-renders in response to state updates. The instructor also highlights that React will skip re-rendering if the new state values are identical to the current state, optimizing performance by avoiding unnecessary updates.

💡Event Handlers

Event handlers are functions in React components that handle user interactions, such as clicks or form submissions. The video focuses on state updates within event handler functions, demonstrating how React automatically batches these updates for improved performance. The instructor implements event handlers like `handleUndo` and `handleTripleInc` to showcase how state updates are managed in response to user actions.

💡Callback Function

A callback function is a function passed as an argument to another function, which will be invoked later. In the context of the video, the instructor emphasizes the importance of using callback functions when updating state based on the previous state value. By passing a callback to the setState function, React provides the latest state value as an argument, allowing for safe and consistent state updates, even when the component's logic changes.

💡setTimeout

setTimeout is a built-in JavaScript function that executes a provided callback function after a specified delay in milliseconds. The video uses setTimeout to demonstrate how React 18 introduced automatic batching for state updates outside of event handlers. By scheduling a state update with setTimeout, the instructor shows that React now batches these updates, resulting in a single re-render, unlike in previous versions.

💡Stale State

Stale state refers to the situation where the state value being accessed or used is outdated or no longer represents the current state of the component. The video illustrates this concept by attempting to access the `likes` state immediately after updating it, resulting in the previous (stale) value being returned. This reinforces the asynchronous nature of state updates in React and the importance of using the correct techniques, such as callback functions, to access the latest state value.

💡Component Instance

A component instance in React refers to a specific instance or instantiation of a component class or function. Each time a component is rendered, it creates a new instance with its own state and lifecycle methods. The video discusses how React avoids re-rendering a component instance if the new state values are the same as the current state, as it would result in an unnecessary update.

💡Performance Optimization

Performance optimization is the process of improving the efficiency and responsiveness of an application or system. In the context of React, techniques like batching state updates and avoiding unnecessary re-renders are forms of performance optimization. The video emphasizes how these optimizations help React applications run smoothly and efficiently, particularly when dealing with frequent state updates or complex user interfaces.

Highlights

React batches state updates in practice, and state updating is asynchronous.

Implementing functionality to undo or reset states using a handleUndo function.

Using console.log to prove that state updates are batched and only cause one component re-render.

Demonstrating that state updating is asynchronous by accessing the state value immediately after updating it.

Explaining why the component is not re-rendered when the new state is equal to the current state.

Implementing a handleTripleInc function to increase the likes state by three.

Demonstrating that setState with a value updates the state asynchronously, causing stale state issues.

Using a callback function with setState to update the state based on the current state, solving the stale state issue.

Explaining the importance of using a callback function with setState to ensure correct state updates, even with future code changes.

Proving that automatic batching in React 18 works even outside of event handlers, such as with setTimeout.

Demonstrating the difference between React 17 and React 18 regarding automatic batching with setTimeout.

Summarizing the key points covered in the transcript, including state batching, asynchronous state updates, and the importance of using callback functions with setState.

Transcripts

‫All right, so let's move back to our project,

‫and see how React batches state updates in practice

‫and how this state updating is in fact asynchronous.

‫So let's come down here to our TabContent component,

‫and then let's play around a little bit with the states

‫that we have here.

‫And first of all, I want to now implement the functionality

‫of this undo button here.

‫So this undo will basically undo

‫or reset the two states that we have here.

‫So this one, and this one.

‫So let's write a simple function handleUndo.

‫And then what it does is setShowDetails back to true,

‫and set the likes back to zero.

‫And then let's use that handler right here.

‫So easy enough, handleUndo.

‫And yeah, that works great.

‫So as we just learned in the previous lecture,

‫inside of this event handler function here,

‫these two state updates are batched.

‫So they will only cause one component re-render.

‫Now how can we actually prove that?

‫Well, one simple way is to lock something

‫to the console here.

‫So let's say render.

‫And so then each time that the component gets re-rendered,

‫and so then each time this console.log will log render

‫to the console.

‫So let's see.

‫Let's first get rid of these other ones that we had here.

‫So here there are, and okay.

‫Now nevermind this one here that is a bit more grayed out.

‫This is coming from somewhere else.

‫So only this one render here is important.

‫So this first render string here

‫comes from the initial render of this TabContent component.

‫And if we go to another tab, then we get another one,

‫because of course, then this component here is updated.

‫Now, okay.

‫Now let's remove this, so that we start empty,

‫or actually we will see a few more.

‫So each time that we click here,

‫the component function gets rendered,

‫and so then the console.log is executed.

‫And so this is actually a really nice way of proving

‫that rendering is calling the component function.

‫Now, all right?

‫But now let's empty this.

‫And then as I click this button here,

‫we should only see one render here,

‫which would then mean that these two state updates

‫were batched.

‫So let's see.

‫And indeed, we only get one here.

‫Great.

‫Now let's also see that the state updating is asynchronous.

‫So basically, if I try to access the number of likes here

‫right after updating the state, then what happens?

‫So first I need to of course increase a little bit,

‫then let's clean this.

‫And as I reset, well, we get five,

‫which might be surprising.

‫But if you paid good attention in the previous lecture,

‫then this will actually no longer come as a surprise to you.

‫So the reason that here we get five is that the state

‫is in fact actually only updated after the re-rendering,

‫or basically during the re-rendering,

‫but not immediately after we call dysfunction.

‫So that's impossible.

‫And therefore, here we still get that old likes state,

‫which again is still at five.

‫Then now it is of course at zero,

‫because now the re-rendering has already happened.

‫Now, by the way, what do you think will happen,

‫so what do you think will get rendered

‫if we click the undo button again?

‫So let's clear this.

‫And so let's see what happens.

‫So I click this now, and you see that no render

‫was logged to the console.

‫So why do you think that is?

‫Why was the component instance not re-rendered this time?

‫Well, it's because both of the state values

‫were already at their default basically.

‫So details was already true and likes was already zero.

‫And so then as we attempted to update the state,

‫both of them were actually not updated.

‫And again, that's because the new state

‫was equal to the current state.

‫And so in that situation,

‫React will not even try to attempt to update the state,

‫and then of course, it will also not re-render

‫the component instance.

‫And so that's why, well, nothing happens.

‫So as we keep clicking here, of course,

‫the console.log keeps getting executed,

‫but again, the component itself is not re-rendered.

‫Okay, but let's move on here,

‫and let's implement this next button here.

‫So here I have these three pluses,

‫which means that when I click here,

‫I actually want like a super like,

‫so this should then improve by three.

‫So let's create a function for that.

‫And I will just copy this one.

‫And let's call it TripleInc.

‫And then I'll just duplicate this here.

‫And then let's come down here,

‫onClick and then handleTripleInc.

‫Okay, let's go back to our function,

‫because this will become very important.

‫So what do you think is going to happen

‫when I click here now?

‫Again, let's close.

‫So what do you think will happen

‫to the state here in particular?

‫So let's see.

‫And well, it only increased once,

‫so not three times as we might expect.

‫But were we actually really expecting

‫that it would increase three times?

‫I mean with what we already know,

‫we should know that this here could never work.

‫So let's see why that is.

‫So right here at the beginning of dysfunction

‫likes was zero, right?

‫And so then here, setLikes would be zero

‫plus 1 equals 1, right?

‫So this one is pretty clear, but then what in the next line?

‫So what is the value of likes here in this line?

‫Well, it is actually still zero.

‫And so that's because the state update

‫is once again, asynchronous.

‫So we do not get access to the new state value

‫after this line of code right here.

‫And so this is exactly what happens down here.

‫So here, the state is now stale,

‫so as we learned in the previous lecture as well.

‫So we can very easily see that here again

‫with this console.log.

‫So if I click again, and actually I want the other one.

‫So this one here, well then you see that it became two,

‫which is exactly the value that we had before.

‫And so here it was 2 plus 1 made this new 3.

‫But here, it was still 2, and here as well,

‫and here as well.

‫So how could we make this work

‫if we really wanted to update the state

‫three times like here?

‫I mean, of course, we could just do this,

‫but this is not the point here.

‫So we are trying to learn how we could do this right here

‫in another way.

‫So actually, we have been doing that all along.

‫So all the time, whenever we were updating state

‫based on the current state,

‫we would use a callback function instead of just a value.

‫So we also talked about that in the previous lecture.

‫And so now the time came where we really learn

‫why we have been doing it with the callback function

‫all the time.

‫So let's remove this here or comment it out.

‫And then let's do it the right way.

‫So setLikes, and now we pass in the callback function.

‫And then as you already know,

‫the first argument here is the current value of the state,

‫and then we just return the new one.

‫And again here, likes could be called anything.

‫Okay, let's do this three times, and then let's reload.

‫And now, yeah, now it works.

‫So this is the trick that changes the way

‫this state is updated.

‫So here in the callback function,

‫we do actually get access to the latest updated state.

‫So initially likes was zero, and then it returned 1.

‫And so then in the next call here,

‫this likes in this callback function will be 1.

‫And so then we can update it

‫to another one, and to another one.

‫Beautiful.

‫And so this is the reason why I've been telling you

‫that each time that we set state based on the previous state

‫or based on the current state,

‫we should always, always use a callback function

‫like this here.

‫Now you might be wondering like why should we do that here?

‫I mean, it works perfectly fine, right?

‫And you're right about that.

‫It works perfectly fine,

‫but we never know what other developers

‫might do with our functions,

‫or even what we might do later ourselves.

‫So let's say that at some point,

‫we want to change how this function works,

‫and then without thinking about it, we just do this.

‫And so then we go back to this not working as expected.

‫So now we want to increase the likes by 2,

‫but it will still only increase by 1, right?

‫Or another situation, maybe, let's comment this one out.

‫So maybe, here we could think

‫that we could just call this function here three times.

‫Or maybe some other developer might think that.

‫And so then they would get surprised when they see

‫that this is actually not working, right?

‫And so again, you should always,

‫always use the callback function,

‫because then you are always safe for whatever change

‫your code goes through in the future.

‫So with this, it will now work,

‫but of course, we need to write the correct variable name.

‫So yeah, now it does work.

‫So even if you then use the function somewhere else,

‫by doing this, you are safeguarded about well,

‫any changes that might occur in the future.

‫All right.

‫And now to finish, let's just prove

‫that automatic batching now works in React 18

‫even outside of event handlers.

‫So here we have this button that should undo,

‫so it should reset our state two seconds later.

‫Well, that's easy enough.

‫Let's just create a function called handleUndoLater.

‫And this function will simply set a timeout,

‫and then after two seconds, it'll call handleUndo.

‫So after 2000 milliseconds.

‫And so what this will do is to schedule

‫this handleUndo function to be executed two seconds

‫after this function here was called.

‫And so then, handleUndo is no longer really

‫an event handler function.

‫It's just any function that simply gets called

‫at a later time.

‫So that's just what setTimeout does.

‫So let's then wire that up here with the onClick prop.

‫So handleUndoLater.

‫All right.

‫Let's just then set our state.

‫Let's clean up here.

‫And then I just clicked, and let's wait.

‫And indeed, two seconds later, our state was updated.

‫And indeed, our component was only rendered once,

‫which is proved here by this single render string.

‫Great.

‫So again, this proves that in React 18

‫batching happens not only inside event handlers,

‫but also inside a set timeout.

‫And the same is true for promises and other situations.

‫Now, just to really make sure,

‫and you don't have to do this,

‫but I like to play around with this stuff.

‫So what I want to do now is to render this using React 17.

‫So I will comment this one out, and comment this one, okay?

‫And then here we need to also change here from here.

‫And so now this is basically back

‫to being a React 17 application.

‫And that's exactly what it says here in this warning.

‫So until you switch to the new API,

‫your app will behave as if it's running React 17.

‫But right now, that's actually exactly what we want.

‫So now we get some error here, but yeah.

‫So let's do some state updating here.

‫Then I will clean and watch what happens

‫when I click this button now.

‫So let's wait.

‫And now we got two re-renders.

‫And so this does actually prove that before React 18,

‫automatic batching was not happening inside a setTimeout.

‫So that's really curious,

‫but of course, let's now put it back.

‫All right.

‫So this was just to show you

‫that there really is a difference,

‫so that React 18, well really changed this.

‫So again, now we should be back to only one.

‫Yeah, there we go.

‫Okay, and this is actually all I had to show you here.

‫So this was a bit longer than expected,

‫but we did to a lot of stuff here.

‫So after you do a quick recap of everything we just do here,

‫or that we did here, actually,

‫then let's go to the next lecture.