Learn React Hooks: useTransition - Simply Explained!

Поділитися
Вставка
  • Опубліковано 4 лис 2024

КОМЕНТАРІ • 63

  • @cosdensolutions
    @cosdensolutions  7 місяців тому

    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

  • @sumitdubey8695
    @sumitdubey8695 5 місяців тому +1

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

  • @AnuragSingh-ev8qd
    @AnuragSingh-ev8qd 8 місяців тому +2

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

  • @jacobwwarner
    @jacobwwarner 5 місяців тому

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

  • @ankurparchani3230
    @ankurparchani3230 Рік тому

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

  • @prakashbanjade4374
    @prakashbanjade4374 Рік тому

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

  • @kofi7617
    @kofi7617 Місяць тому

    Thank you for the explanation, really loved it 🥰

  • @adembenabdallah9678
    @adembenabdallah9678 Рік тому +2

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

  • @EmmanuelOdii80
    @EmmanuelOdii80 Рік тому

    Much simplified than the info from the docs :)

  • @tusharghildiyal6814
    @tusharghildiyal6814 Рік тому +1

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

  • @IAmRC1
    @IAmRC1 9 місяців тому +1

    Nice explanation buddy!

  • @abeercodes
    @abeercodes Рік тому +12

    whoever has found this video on UA-cam is lucky

  • @literallyshane4306
    @literallyshane4306 2 місяці тому

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

  • @irradev
    @irradev 7 місяців тому

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

  • @mikewski4410
    @mikewski4410 Рік тому

    Pretty clean explanation. Easy to understand. Thank you

  • @sviatoslav8776
    @sviatoslav8776 4 місяці тому

    Great explanation. Thanks a lot 👍

  • @michaelm8044
    @michaelm8044 Рік тому

    Sick video. Pretty advanced stuff.

  • @awekeningbro1207
    @awekeningbro1207 4 місяці тому +1

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

  • @subhashmalireddy
    @subhashmalireddy 2 місяці тому

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

  • @rockstarshahid
    @rockstarshahid 7 місяців тому

    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
      @cosdensolutions  7 місяців тому

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

  • @sudiptagogoi1431
    @sudiptagogoi1431 Рік тому

    Thanks a lot cosden

  • @stepanostapuk4120
    @stepanostapuk4120 Рік тому

    Thank you for the video!

  • @garudaphoenix5479
    @garudaphoenix5479 Рік тому

    Thanks, man, clearly explained 💖💖

  • @jerrykodes
    @jerrykodes 6 місяців тому

    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.

  • @tangsi721
    @tangsi721 4 місяці тому

    perfect example

  • @robertomolinasilvera4863
    @robertomolinasilvera4863 9 місяців тому

    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

  • @awekeningbro1207
    @awekeningbro1207 4 місяці тому

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

  • @vuongal1658
    @vuongal1658 Рік тому

    Thank you so much!!!

  • @vinothkumarv9722
    @vinothkumarv9722 6 місяців тому

    Awesome :)

  • @StingSting844
    @StingSting844 Рік тому

    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
      @cosdensolutions  Рік тому

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

  • @gmjitendra
    @gmjitendra Рік тому

    Excellent.

  • @VuDuc-lw5xp
    @VuDuc-lw5xp 4 місяці тому

    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?

  • @Shaheer-xs5os
    @Shaheer-xs5os Рік тому

    Bro that was helpful 😄😊

  • @RajkumarSingh-i5n
    @RajkumarSingh-i5n 2 місяці тому

    Don't you think web worker does similar thing. But nice explanation sir.

  • @dominggusoctovianus4915
    @dominggusoctovianus4915 Рік тому

    Simple but so juice... hehe

  • @bibahbibah5108
    @bibahbibah5108 Рік тому

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

  • @srinivasreddysagi8722
    @srinivasreddysagi8722 2 місяці тому

    Subscriber++ 😁

  • @tnarra
    @tnarra Рік тому

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

  • @MuhammadUsman-ng3kn
    @MuhammadUsman-ng3kn 3 місяці тому

    so it work like lazy loading?

  • @sohailmohammed4024
    @sohailmohammed4024 3 місяці тому

    Nice

  • @PfutIndustries
    @PfutIndustries 10 місяців тому

    your a goat

  • @deliotablang823
    @deliotablang823 Рік тому +1

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

    • @cosdensolutions
      @cosdensolutions  Рік тому +2

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

    • @deliotablang823
      @deliotablang823 Рік тому

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

  • @fullstackprojects5615
    @fullstackprojects5615 Рік тому

    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
      @cosdensolutions  Рік тому

      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

  • @王俊-l4e
    @王俊-l4e Рік тому

    why not use loading instead

  • @Herxh428
    @Herxh428 Рік тому

    Clean

  • @veerasamysevagen9533
    @veerasamysevagen9533 10 місяців тому

    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
      @cosdensolutions  10 місяців тому

      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
      @veerasamysevagen9533 10 місяців тому

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

  • @NoName-j8j3o
    @NoName-j8j3o Рік тому

    Its look like debounce or throthle

  • @danielvega646
    @danielvega646 Місяць тому

    5:12

  • @agustind
    @agustind Рік тому

    I promess you after reading this comment you wont have to read any other comment again

  • @bq_wang
    @bq_wang Рік тому