useTransition in NextJs 14 with 3 Example Usecase

in this video we're going to talk about State transitions in next js14 using the Ed transition hook we're going to see three different use cases the first one is a state transition where you would mark an State update as a transition so your UI is still responsive even though the state is updating because State updates usually are synchronous so when the state is updating and a rerender is happening the UI is blocked the user can't actually do anything else but with transitions that state update or that transition can be interrupted with another decision or state update from the user so for example here if the user wants to go to this uh Team tab which is a slow render component you see I clicked on it but it takes a little while because I am rendering a lot of team members inside of this tab and this is a slow so if I go to the about I don't have transitions right now so if I click on the team and immediately click on the contact after it just froze a little bit before changing to the contact so I'm going to demonstrate this one more time so if I click on the team and then immediately click on the contact it doesn't switch to tap because when we first clicked on the team it went through that render process and it blocks the UI and I the user wasn't able to um interrupt that U State update to change to a different tab now let me just bring a transition here inside of the code and see how this would look like with uh transitions so let me refresh the app here so I'm on the about page I'm going to click on the team and then immediately click on the contact and you would see this time it would immediately switch to the tab which means that state update gets interrupted and switches to the contact tab so let's see this in action team and then immediately contact and just immediately change to the contact so I'm going to do it again team and then contact it just interrupts that state update because it is marked as a transition which is not going to block the UI so it stays responsive even when a render or an State update is happening which allows for a better user experience now the Second Use case we're going to see is what we have already talked about or seen in the optimistic UI video so if you haven't watched that video I'm going to include a link in the cart or this description somewhere for you to watch it but inside of that example when we were calling the ad up optimistic dispatch function for marking these tasks as Complete because we were not doing so inside of a server action we had to wrap it inside of a transition we're going to dive into the code and see all of these implementations in action so don't worry if it doesn't make sense right now I'm just showing or demonstrating the use cases now and then we're going to jump into the code later on and the third use case that we want to implement together is adding a loading spinner or a pending UI so we have this movie app again this is another project that we have done on the channel for implementing search Infinite scrolling and loading skeleton in NEX js14 uh again I'm going to include links to this projects but one thing that I had done here is to add a pending UI so for example here when I'm trying to search for a term let's say godfather uh you can see that loading UI loading spinner shows up it just happened very fast so let me just try something else let's try model R Network and now if I search for Godfather you see that loading spinner shows up until the request is completed so there's a lot to cover we're going to start by understanding the used transition hook the syntax and then once that's done we're going to jump into the code and actually Implement all these three different use cases so let's us start by understanding what transitions or state transitions are now as I mentioned transitions let you update the state without blocking the UI they allow you to keep the user interface responsive even on slow devices now with a transition your UI stays responsive in the middle of a render for example if the user clicks a tab but then changes their mind and click another tab just like the example we showed earlier they can do that without waiting for the first rerender to finish because once you mark a state as a transition it can be interrupted by user interactions or other State updates now what is the convention to actually use transitions there's two ways that you can Mark a state update as transitions the first one is using the used transition hook this is a hook and obviously you can use it in react components or your custom Hooks and the second way is the start transition function which is useful if you wanted to use it outside of a component so let's dive into the used transition hook as I mentioned this is a hook that allows you to update State without blocking the UI you can call the used transition hook at the top level of your component and it returns two values to you one is an is pending State this is to show if a transition is pending this is what we're going to use later on to implement loading UI or a pending UI it also returns this a start transition function which you you're going to use to wrap your State updates to mark them as transitions it does not take any parameters as I and as I mentioned it returns an array with exactly two items the East pending and the start transition so in a nutshell you call the use transition you get these two values you have a state in this case it's a tab we're going to see this inside the code in a second but inside of the way that you're handling the state update you're going to wrap this state updator function inside of a start transition function now the start transition function receives another function we call this a scope and this is where you're going to implement another state update using your state update functions now this is start transition function that you get back from the used transition hook can also be imported from react directly and it's exactly the same function where you can call this and pass a function to it where you can make your State updates or Mark your State updates as transitions now as far as the parameters goes whether you're getting start transition directly from react or you're getting it back from calling used transition hook as I mentioned you just pass a function to it that's called a scope and inside of this function you would update some state by calling one or more State update functions now react is going to call this a scope function and Mark work all of the State updates as transitions now with this out of the way let's just jump into the code and implement this or see this in action let me just make this code a bit bigger so hopefully you can see a bit better let me close this off go to the app and let's explain from a high level what we're doing here so inside of our app we have this page component close this off inside of our page we are rendering this different tabs so we have these tab buttons up top this is going to allow us to change the tab we holding a state for this tab so the active tab we start from the about Tab and then we can use this buttons to basically select a different Tab and down here depending on what tab is now active we are rendering that specific component which is just to show you the about one is showing a card component from chaten to render some content now as I mentioned one of these tabs being the team is a slow render tab so the component is a slow so let's Dive Right into that so inside of our uh Team component what we're doing is that we are rendering a lot of these person components each one of them are delaying the render by 1 millisecond so therefore we rendering a thousand of them so this is going to at least slow down the render for 1 second just so we can demonstrate this state update interruptions with or without the use of transition so inside of our page when we call this buttons we call this select tab function and right now I'm wrapping this state update inside of this start transition that I got back out of our used transition hook so let's try this without just as I showed you in the beginning so right now we're not using a transition and we're just calling this state update function so let's just refresh our app and now you can see if I click on on the team and immediately try to click on the contact page because the state update and the render is blocking the UI because it happens synchronous synchronously I won't be able to switch to the Tab contact tab immediately so it just freezes the UI for a second so let's try that so I'm clicking on the team and immediately on the contact nothing happens until that cycle or render H finishes so the UI becomes responsive again and receives the click event and switches the tab again let's bring the start transition back and see how this is different Let me refresh the app and now let's see how this is different when I click on the team and immediately click on the contact but because now I have marked this state update of switching the tabs as a transition they can be interrupted by another state update so now I click on the team and immediately on the contact you can see it immediately switches the tab because this state update is marked as a transition and can be interrupted now before going to the next example which is optimistic UI let's go back to our notes and I want to talk about some caveats now the point that I just mentioned is what we have over here so a state update marked as a transition will be interrupted by other State updates so inside of our app here when I'm clicking on this this is marked as a transition but it can be interrupted if the user changes their mind and clicks on something else right so that's number one it is the use case for using transitions but it is something that you want to keep in mind and because this is the case you should not use a transition for a state variable that controls an input so let's say you have an input a controlled input inside of a form typically you have an State an unchanged Handler handling that state update or controls the input if you mark that as a transition now anything else can interrupt that and it would just be a bad UI for your user because they can't see what they're typing because it might get interrupted by other State updates now another caveat is that the function you pass into to start transition needs to be synchronous so the state update needs to happen immediately you can't call set timeout inside of a start transition you can but that state update won't be marked as a transition now as I mentioned use transition is a hook it can be called inside of a component uh if you need to start a transition somewhere else for example from a data Library you can call the start transition function that you can import directly from react now start transition function on its own when you import it does not provide a way to track whether a transition is pending if you remember when we call this use transition hook it returns this e pending which we're going to use inside of our app uh to show a different loading UI for our tabs but the start transition function itself and you import it directly from react doesn't have that showing indicator so if you do need that pending indicator you need to use the used transition hook now going back to our application when I click on this team tab look it changes to loading and while it is loading I see a different text there so what I'm doing here here I'm using this e pending now for this tab button that's for the team I'm passing down this e pending and inside of this t button I'm saying if the East pending is true say loading so this is the same technique that we're going to use to add loading UI in our movie app in a second but just so you know that you are getting this is pending back this is going to be a loading UI or a pending State while and a state update is is in transition now let's go to the second example which is from our video about optimistic UI let me just change the vs code here to also show that one now as I mentioned when you are using the use optimistic hook you're getting an optimistic State as well as a dispatch function now you should call that dispatch function inside of a server action uh to do the mutation on the server and then you'll optimistically update the UI now if this is not very comfortable or familiar to you watch the video that we have dedicated to optimistic UI and you would understand but here we just want to dive into one of the components uh which is the to-do item component which is using the use optimistic hook to G to get some optimistic to-dos back this is responsible for marking this tasks as complete or checking and unchecking them this used optimistic Hook is returning this update too this is a dispatch function to actually optimistically update our UI but we are not calling this update Todo inside of an action or a form action which requires us to wrap this dispatch function with a start transition or mark this update as a transition so down here on the unchecked change event handler I'm wrapping this handle change function this is where or inside of which I'm actually calling this dispatch optimistic UI function so I'm wrapping everything inside of this start transition to mark this estate updates as a transition and that's how uh the optimistic UI works if you're not calling it from uh an action and this is a valid use case for using server actions as I also mentioned in that other video there's different ways you can use server actions one would be the action prop of a form you can also pass them to your event handlers uh for a button here it's a checkbox but under the hood it's a button nonetheless uh one of the use cases for optimistic UI can happen when you're calling a serve action outside of a form action for which you need to again mark it as a transition long explanation but hopefully it makes sense now the third use case would be our movie app so let me just change again to that code now in this movies app we implemented a loading skelet but to show up when the user is trying to search for a movie using suspense boundaries and this a weight component that receives a promise and Returns the data to this children component so if you haven't watched that video definitely give it a watch because it uses a pattern that lifts up the state up to the URL so if you're using the URL as a way to communicate from our client site back to the server site to implement this search functionality and also the loading UI but but in this uh example I wanted to also show that we could have added a loading UI to the search box using transitions so inside of this search component this is where we are rendering this input element so from a high level we are debouncing this input so we have this state that's text that's controlling the text input we are debouncing the user input by 750 milliseconds so for them to finish typing or that we not hitting our server on any keystroke we debouncing this text input and once this query or the debounced value changes every time what we doing is that we are set calling the router. push method and passing that search query to our URL which is going to then load a different set of movies inside of our server components and render the UI now what I had done here to change it this is start transition is new so the previous video didn't have the start transition it was just just calling the router. push but now I've just wrapped this router. push calls inside of a transition so I'm marking this State updates now the URL is also another state so I'm marking this State updates as Transitions and the benefit that I'm getting out of doing it is not to interrupt them is to just get this East pending value back so I can show a loading spinner down here all I had done is that I'm saying inside of this uh text box if the is pending is true show a loading spinner so therefore if I now go ahead and type in Bruce Lee here you you see that loading spinner indicating that a search is happening so if you've received the search and something is happening whereas if I don't have this assuming that we don't have any other loading UI just turn this back into a slower Network again now if I search for Godfather you can see without that loading spinner the user doesn't even know that our app has received the search and is actually fetching some data so uh what we had before was through this suspense so if I turn this back on so you know what we were doing before just refresh this again you saw the loading spinner flashing for a second there but let me just refresh this app so this is what we had before where anytime that we would had this search we would show this loading spinner or we would show this loading skeleton while the search was going through before showing the results now another way that I wanted to show here by removing this suspense was to then bring in this is pending that we get back out of the transition just another way of showing a loading UI as you can see here if I now go and search for Godfather again these are the two terms that I keep searching let me just no throttle and refresh the app it's search for Jackie chandice time you show the loading spinner showing up and there you have it we learned about State transitions in next js14 using the used transition hook that not only gives you the start transition function back which you can use to Mark any state update as transition but you can but it also gives you back the E pending state which you can use to implement uh loading UI or pending UI now to recap the three different use cases that you can have with to State transitions the first one was to make your UI responsive so when a state update is happening a render is happening for whatever reason it's a slow your UI stays responsive to user interactions so they can interrupt that state update if they change their mind for example to change the tabs the Second Use case for us was when we were using the use optimistic hook but we were calling the dispatch function not from inside of a form action but just from an event handler on a button we needed to wrap that state optimistic update into a start transition or we needed to mark it as a transition and the third use case was actually wrapping the router. push that communicates a URL State inside of a transition or mark it as a transition to get the EAS pending back so we can communicate to the user that something is happening if you show a loading spinner that shows that their request is in process instead of showing nothing so I hope you found this video useful if you have any questions like always hit me up in the comments and I'll see you in the next one bye-bye

Channel: Hamed Bahram

Views: 5,739

Keywords:

Id: SFZrHMZQon8

Length: 20min 37sec (1237 seconds)

Published: Sat Feb 17 2024