Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    De-prioritize NonUser-Blocking Updates with React useTransition's startTransition Function

    reactReact
    ^0.0.0-experimental-b53ea6ca0

    In blocking rendering, all updates have the same priority.

    In Concurrent Mode, work is "interruptible". And user-blocking updates are treated with highest importance.

    To keep interfaces interactive and snappy, we can de-prioritize slower updates.

    The useTransition Hook — and its startTransition function — allows React to schedule work after higher priority work.

    Code

    Code

    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 0:00 With Concurrent Mode enabled, we notice a new error as we click this button a couple times. React's errors are excellent. Let's read every word of this one.

    0:11 Warning. Pokémon Detail triggered a user-blocking update that suspended. The fix is to split the update into multiple parts, a user-blocking update to provide immediate feedback and another update that triggers the bulk of the change. Refer to the documentation for useTransition to learn how to implement this pattern.

    0:34 There's no link in this one yet, but we can search the docs for useTransition. Here, I'll show you the bare minimum to make this error go away, which is just to use startTransition. What React is trying to tell us is that when we did this onClick, this fetch request gets queued up and it has the potential to block user interaction.

    0:56 If someone's typing on an input or clicks another thing, those things could be delayed because of this, this longer fetch request. We use useTransition to communicate that we're OK with running this update slightly deprioritized if it'll keep the UI nice and snappy for the customer.

    1:17 Let's use this hook, React.useTransition. Like useState, we're going to make an assignment. By convention, this first item is known as startTransition. It's a function. To use it, we just sneak it between our onClick callback and our setPokemonResource function.

    1:41 This takes a function. We'll wrap our setPokemonResource with an arrow function, save, and see if we made that error go away. Perfect. We've now successfully deferred this state update by using startTransition from the useTransition hook.