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

    Reveal Suspense Components in Order with SuspenseList's revealOrder Prop in React

    Michael ChanMichael Chan
    reactReact
    ^0.0.0-experimental-b53ea6ca0

    revealOrder is one of SuspenseLists configuration options. It can be undefined, together, forwards, and backwards.

    • undefined (default): reveal children as suspenders resolve
    • together: reveal children together, once all suspenders are resolved
    • forwards: render children from top to bottom, indifferent to suspender resolution order
    • backwards: render children from bottom to top, indifferent to suspender resolution order
    Code

    Code

    Become a Member to view code

    You must be a 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
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: The Suspense list reveal order prop has a number of options -- forwards, backwards and together. Let's see what they do.

    We've seen previously that, by default, Suspense list will render the first available Suspense components. If we hit refresh again, we'll see the list of Pokemon come in first, followed by the Pokemon.

    However, when we pass in the prop reveal order, and use the value together, it works like a promise.all. Anything that is in here, any of these suspense components, we're going to wait for all of them to resolve before we show anything. Let's watch that again, waiting for both of these to come back. Then we show it all at once.

    Because we're controlling the speed of these responses, we know that this one comes in faster than this one. Let's change this to backwards first.

    We'll always see the bottom one resolve first or see them resolve together. We saw the first case, but let's verify that they'll show together if this promise resolves second. Jump into our API and just switch these values.

    This one's now 1.5 seconds, and this one is 3 seconds. Now we'll see that they come together, because backwards always tries to resolve the bottom Suspense component first. Because it takes longer, they render together.

    We can see this effect in reverse if we try out forwards. Now the individual Pokemon resolves first, and then the second Suspense component when it resolves. I find that in most cases, forwards or together is what I want to use.