Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
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.
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.
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
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?
Hi, I can understand the abstract part that useTransition discards non-urgent action and handle urgent action. But can someone help me explain how startTransition discards post behind the scene with Javascript side? Because in my knowledge, when a synchronous is execute like a Post component in video, we can't discard it with outside code. So how useTransition can do that?
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.
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
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
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
Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
What you say "This is the last video you are ever going to watch", is actually 100% true. Just amazing explanation 👌🏻
I had to watch few parts of the video twice, but got it at the end. Amazing explanation, you got one more subscriber 👍
Beautiful. I didn't think you could have such a refined control of rendering by using hooks like this.
I really don't have to go to another video for this topic ever again 👏🏻
There you go ☺️
Cool, now I understand useTransition and I won't need to look at other videos and solutions for this.
Great explanation.
happy to hear it!
Thank you for the explanation, really loved it 🥰
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 ❣❣
thank you for the kind words!
Much simplified than the info from the docs :)
That was very clear and helpful brother. Thanks, much appreciated 🙌👏
Glad you enjoyed it!
Nice explanation buddy!
whoever has found this video on UA-cam is lucky
awesome, thank you, these videos are really clear :)
Amazing! I will refactor my code. Thanks so much!
Pretty clean explanation. Easy to understand. Thank you
Great explanation. Thanks a lot 👍
Sick video. Pretty advanced stuff.
so basically useTransition is just debouncing the function to be invoked a little bit later(in milliseconds)?
It'd be great if you can explain the caveats mentioned on the react docs as well 🙌🙏. TIA
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.
only render a few at a time. So either use virtualization, or paginate them and load them 20 at time
Thanks a lot cosden
Thank you for the video!
Thanks, man, clearly explained 💖💖
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.
perfect example
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
does the useTransition hook work with react's userReducer just like it would be useState?
Thank you so much!!!
Awesome :)
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?
depends, if they are driven by state, this will control when that state gets interrupted or not
Excellent.
Hi, I can understand the abstract part that useTransition discards non-urgent action and handle urgent action. But can someone help me explain how startTransition discards post behind the scene with Javascript side? Because in my knowledge, when a synchronous is execute like a Post component in video, we can't discard it with outside code. So how useTransition can do that?
Bro that was helpful 😄😊
Don't you think web worker does similar thing. But nice explanation sir.
Simple but so juice... hehe
u are right i don't need to read or see another thing
Subscriber++ 😁
Why does my script to animate in page router doesn't work in app router of nextjs
so it work like lazy loading?
Nice
your a goat
seems like same with the suspense lazy load what are the difference between them?
suspense is for delaying the loading of something and this is for interrupting it and prioritising other renders first
Many thanks. Is this working also using next/link?
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.
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
why not use loading instead
Clean
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
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
@@cosdensolutions makes sense yeah. Thanks a lot for responding.
Its look like debounce or throthle
It does
5:12
I promess you after reading this comment you wont have to read any other comment again
Thanks you saved me