High-Performance State Updates

State represents the dynamic aspect of your React application. When the state changes, your components react to those changes. Without state, you would have nothing more than a fancy HTML template language. Usually, the time required to perform a state update and have the changes rendered on the screen is barely, if at all, noticeable. However, there are times that complex state changes can lead to noticeable lag for your users. The goal of this chapter is to address these cases and find out how we can avoid those lags.

In this chapter, you’ll learn how to do the following:

• Batch your state changes together for minimal re-rendering
• Prioritize state updates to render content that’s critical for your user experience first
• Develop strategies for performing asynchronous actions while batching and prioritizing state updates

Technical requirements

For this chapter, you’ll need your code editor (Visual Studio Code). The code we’ll be following can be found here: https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter10.

You can open the terminal within Visual Studio Code and run npm install to make sure you’re able to follow along with the examples as you read through the chapter.

Batching state updates

In this section, you’ll learn about how React can batch state updates together to prevent unnecessary rendering when multiple state changes happen simultaneously. In particular, we’ll look at the changes introduced in React 18 that make automatic batching of state updates commonplace.

When your React component issues a state change, this causes the React internals to re-render the parts of your component that have changed visually as a result of this state update. For example, imagine you have a component with a name state that’s rendered inside of a <span> element, and you change the name state from Adam to Ashley. That’s a straightforward change that results in a re-render that’s too fast for the user to even notice. Unfortunately, state updates in web applications are rarely this straightforward. Instead, there might be dozens of state changes in 10 milliseconds. For example, the name state might follow changes...

Prioritizing state updates

When something happens in our React application, we usually make several state updates so that the UI can reflect these changes. Typically, you can make these state changes without much thought about how the rendering performance is impacted. For example, let’s say you have a long list of items that need to be rendered. This will probably have some impact on the UI: while the list is being rendered, the user probably won’t be able to interact with certain page elements because the JavaScript engine is 100% utilized for a brief moment.

However, this can become an issue when expensive rendering disrupts the normal browser behavior that users expect. For example, if the user types in a text box, they expect the character they just typed to show up immediately. But if your component is busy rendering a large item list, the text box state cannot be updated right away. This is where the new React state update prioritization API comes in handy...

Handling asynchronous state updates

In this final section of the chapter, we’ll look at the common scenario of fetching data asynchronously and setting render priorities. The key scenario that we want to address is making sure that users aren’t interrupted when typing or doing any other interaction that requires immediate feedback. This requires both proper prioritization and handling asynchronous responses from the server. Let’s start by looking at the React APIs that can potentially help with this scenario.

The startTransition() API can be used as a Hook. When we do this, we also get a Boolean value that we can check to see whether the transition is still pending. This is useful for showing the user that things are loading. Let’s modify the example from the previous section to use an asynchronous data-fetching function for our items. We’ll also use the useTransition() Hook and add loading behavior to the output of our component:

let unfilteredItems...

Summary

This chapter introduced you to the new APIs available in React 18 that help you achieve high-performance state updates. We started with a look at the changes to automatic state update batching in React 18 and how to best take advantage of them. We then explored the new startTransition() API and how it can be used to mark certain state updates as having a lower priority than those that require immediate feedback for user interactions. Finally, we looked at how state update prioritization can be combined with asynchronous data fetching.

In the next chapter, we’ll go over fetching data from the server.