Compared to use deferred value, which we looked at in the previous lesson. If you want more fine green control for which tasks are lower priority and therefore it's okay for them to lag to eventual consistency, then use transition hook is the answer. Let's take a look. Now, of course, if you are going to demonstrate some performance issues, we are going to need to render lots and lots of items, so let's render 10,000 items. We have this utility function called search items, which takes a search term as an input and if a value is provided, then it generates count number of search terms.

We will also provide the user with the opportunity to generate a random dummy search term, and for that we have this utility function called random cars. Finally, we have this simple list component that takes items and style and then renders out a simple diviv with that style that contains individual items rendered into the individual diffs. Now, even though this module is not the focus of this lesson, there's nothing particularly complicated over here. The whole objective is to demonstrate rendering lots and lots of items. So let's jump into our application

and bring in the search items function, the random cost function, and the list component. We are going to create two simple state variables, one for the value that the user can provide and one for the items that will be derived from that provided value. Whenever the user provides a value, we will do two things. We will set the value to that value and then we will search the items based on that value and set the items to that result. We will also allow the user to generate a random value, and for that we have the handle random function which generates that random value using random cars

and then based on that result sets the value and loads the items within the UI of our application. We have the simple input wired to the value a button wired to handle random and list that displays the list of items that we get back as the results. Now let's jump into the UI and see how this application currently performs. Of course, as we interact with the input it is going to perform that search and then try to render all that results and we will see some noticeable lag between when we provide the keystrokes till when they get

reflected within the ui because of course react not only has to update the value, but it also has to perform the search and then render the search results within the list. The other feature of this application is that the user can click the random button, and in this particular case we might choose to keep the value and the search results consistent with each other as this is a more reasonable lag. Ideally, if the user is typing a value in the search input, you would have the search value update immediately, but only run the imperative search task if react isn't already busy.

This kind of fine grain control over imperative tasks is offered by the use transition hook. The use transition hook is a part of the main react Module, which means that we can bring it in just like we bring in the other hooks. Like you state invoking this hook returns two variables. The first one is a pending bullion, and the second is a start transition function, which can be used to schedule a low priority task. An example would be the state update for the items and we can wrap it with the start transition, and this means that if react is doing some heavy lifting, then this particular state update does not necessarily need

to happen, so we always update the value to give the user immediate feedback, but if you're setting the items and a new request comes in, then essentially that work can be abandoned. So let's try using our application again. This time as we enter keys into the value, we get immediate feedback, but the search results can be lagged because of course we wrap them up in a start transition and because we've allowed the list to lag, the value gets updated immediately because we are not stuck waiting for the items to render, and because of that fine control offered by stock transition, we still have the value as well

as the results updating in unison when we click the random button because there is no transition in that particular case. Obviously, if you are showing still information to the user, it's a good idea to provide a nice visual indication of this fact and we can actually do that quite easily with the is pending flag provided by the use transition hook. Now, one thing that I want to point out is that we got our access to the start transition function by using the use transition hook. There is actually a route level start transition function provided by React as well, but the reason why we didn't use it over here,

and I recommend that you don't use it either is because this function does not provide that a pending flag that we are going to use right now, the is pending bull that is returned by use transition is going to be true if there is any transition that is currently executing that hasn't been fully rendered to the screen. So if you want to tell the user that they might be looking at stale data, we can use this anywhere within our rendering. For example, we can pass a custom style to the list to change the opacity to be a bit more dull to point out that this is now stale information.

So now within our application as we enter various characters into the input, the list is going to be a bit great out while we are still making some modifications and only once we stop making modifications and the list gets a full turn to render, does it turn back to a full opacity. Now as you might recall, there is no transition when we click the random button, so of course in this particular case, there is no opacity change. As you mentioned in the introduction, if you want a simple way to layer value, if react is busy, then use deferred value is easier to use. But if you want to fire off some imperative tasks

that only run, if react isn't busy, then use transition and start transition Are your friends. As always, thank you for joining me and I will see you in the next one.