Learn React Hooks: useTransition - Simply Explained!

In this video we will learn about React hooks, starting with useTransition. This powerful React hook will allow you to have interruptible state updates that you can configure to priorities some updates over others. This is an optimisation React hook which you will use to give users a better experience on your app. You will learn how to use the useTransition hook, how to start a transition with startTransition, and how to use the isPending flag to show some UI as the transition is happening.

In this new React world, hooks are here to stay, so it's best to learn them! In this tutorial I demonstrate the useTransition React hook, and I explain it very simply and in a way that is easy to understand. Enjoy!

[AnuragSingh-evqd]

I had to watch few parts of the video twice, but got it at the end. Amazing explanation, you got one more subscriber 👍

[sumitdubey]

What you say "This is the last video you are ever going to watch", is actually 100% true. Just amazing explanation 👌🏻

[jacobwwarner]

Beautiful. I didn't think you could have such a refined control of rendering by using hooks like this.

[prakashbanjade]

Cool, now I understand useTransition and I won't need to look at other videos and solutions for this.
Great explanation.

[ankurparchani]

I really don't have to go to another video for this topic ever again 👏🏻

[adembenabdallah]

I appreciate your work this helped a lot ❤❤. Your are the best who explain the hooks it is true the last video you need to watch ❣❣

[tusharghildiyal]

That was very clear and helpful brother. Thanks, much appreciated 🙌👏

[kofi]

Thank you for the explanation, really loved it 🥰

[bronxandbrenx]

I will include this functionality to my page buttons

[literallyshane]

awesome, thank you, these videos are really clear :)

[dev_odii]

Much simplified than the info from the docs :)

[irradev]

Amazing! I will refactor my code. Thanks so much!

[mikewski]

Pretty clean explanation. Easy to understand. Thank you

[Bhannat]

may be the better solution to wrap state updates from PostTab or Slow Post in setTransition instead of selectTab - just to differentiate high priority state-change v/s low priority state-change,

[subhashmalireddy]

It'd be great if you can explain the caveats mentioned on the react docs as well 🙌🙏. TIA

[abeercodes]

whoever has found this video on YouTube is lucky

[robertomolinasilvera]

React sends one rerender with currentState and isPending:true to component to tell it will start transition. Then it will rerender component with newState if during this rerender (probably slow) another update is raised, async rerender will be stopped

[MaksymCzech]

Thank you, the explanation in React documentation is really too general and unspecific, your video was very helpful.

[awekeningbro]

so basically useTransition is just debouncing the function to be invoked a little bit later(in milliseconds)?

[awekeningbro]

does the useTransition hook work with react's userReducer just like it would be useState?