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...