Learn React Hooks: useTransition - Simply Explained!

Подписаться 87 тыс.

Просмотров 22 тыс.

50% 1

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
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!

Опубликовано:

9 сен 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 54

@cosdensolutions 3 месяца назад

Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react

@sumitdubey8695 Месяц назад

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

@AnuragSingh-ev8qd 4 месяца назад

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

@mikewski4410 9 месяцев назад

Pretty clean explanation. Easy to understand. Thank you

@jacobwwarner Месяц назад

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

@tusharghildiyal6814 9 месяцев назад

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

@cosdensolutions 9 месяцев назад

Glad you enjoyed it!

@prakashbanjade4374 9 месяцев назад

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

@cosdensolutions 9 месяцев назад

happy to hear it!

@abeercodes 9 месяцев назад

whoever has found this video on RU-vid is lucky

@michaelm8044 9 месяцев назад

Sick video. Pretty advanced stuff.

@IAmRC1 5 месяцев назад

Nice explanation buddy!

@garudaphoenix5479 9 месяцев назад

Thanks, man, clearly explained 💖💖

@sviatoslav8776 9 дней назад

Great explanation. Thanks a lot 👍

@adembenabdallah9678 9 месяцев назад

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

@cosdensolutions 9 месяцев назад

thank you for the kind words!

@irradev 3 месяца назад

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

@stepanostapuk4120 9 месяцев назад

Thank you for the video!

@sudiptagogoi1431 9 месяцев назад

Thanks a lot cosden

@ankurparchani3230 9 месяцев назад

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

@cosdensolutions 9 месяцев назад

There you go ☺️

@vuongal1658 9 месяцев назад

Thank you so much!!!

@vinothkumarv9722 Месяц назад

Awesome :)

@EmmanuelOdii80 7 месяцев назад

Much simplified than the info from the docs :)

@Shaheer-xs5os 9 месяцев назад

Bro that was helpful 😄😊

@gmjitendra 9 месяцев назад

Excellent.

@Herxh428 9 месяцев назад

Clean

@tangsi721 7 дней назад

perfect example

@dominggusoctovianus4915 9 месяцев назад

Simple but so juice... hehe

@user-mr8rv8yb8v 5 месяцев назад

your a goat

@jerry_codes 2 месяца назад

Quick Question? Can I use the useTransition to put the loading state for side effects functions For e.g. if I have to update the user and I'll wrap the start transition on update function. I can use the isPending state to show that is updating or likewise.

@robertomolinasilvera4863 5 месяцев назад

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

@StingSting844 9 месяцев назад

Neat. So what happens to components that render direct from manipulations like chart libraries or canvas libraries? They don't work because react has no way to stop them right?

@cosdensolutions 9 месяцев назад

depends, if they are driven by state, this will control when that state gets interrupted or not

@bibahbibah5108 9 месяцев назад

u are right i don't need to read or see another thing

@rockstarshahid 2 месяца назад

Awesome. Simple and clear explanation. But I have a question regarding POSTS page. How can we resolve the UI freezing issue for Posts page? Or how can we load Posts page content faster? Can you help me with this? Thanks.

@cosdensolutions 2 месяца назад

only render a few at a time. So either use virtualization, or paginate them and load them 20 at time

@awekeningbro1207 5 дней назад

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

@awekeningbro1207 5 дней назад

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

@tnarra 8 месяцев назад

Why does my script to animate in page router doesn't work in app router of nextjs

@fullstackprojects5615 7 месяцев назад

hello, Can you explain this one please - while (performance.now() - startTime < 1) { console.log("entered while...", performance.now()); // Do nothing for 1 ms per item to emulate extremely slow code } performance.now() - startTime < 1 should always be greater than 1 isn't it? I don't know why is it going inside the while loop and what does 1ms delay is derived. Would be great if you can please explain.

@cosdensolutions 7 месяцев назад

this code just forces the component to wait 1ms before continuing the render. It comes from the React docs in their examples! It just simulates slowness so that you can actually see the effects of what you are doing

@deliotablang823 9 месяцев назад

seems like same with the suspense lazy load what are the difference between them?

@cosdensolutions 9 месяцев назад

suspense is for delaying the loading of something and this is for interrupting it and prioritising other renders first

@deliotablang823 9 месяцев назад

Many thanks. Is this working also using next/link?

@veerasamysevagen9533 6 месяцев назад

Hello, Loved your explanation but it does not seem to work with this piece of code. const buttonClick = (type: string) => { startTransition(() => { if(type === "fast") { setCounter(25); } else { setCounter(() => { let sum = 0; for(let i =0; i

@cosdensolutions 6 месяцев назад

because startTransition works by interrupting renders that take too long after being set, not the actual setting of a new value. In your case, you're just taking a while to set the new value to trigger a re-render, but the actual re-render is super fast as it will just update the counter with one value

@veerasamysevagen9533 6 месяцев назад

@@cosdensolutions makes sense yeah. Thanks a lot for responding.