DEV Community: Eddie

What React team is working on? (part two - forwards & backwards revealOrder)

Eddie — Wed, 24 Jul 2019 15:05:55 +0000

Okay. Several days after merging this commit:

What React team is working on? (part one): SuspenseList component

Eddie ・ Jul 22 '19

Sebastian opened another pull request to the master branch. In this pull request, He added two more options for the "revealOrder" property.

Working DEMO

1. forwards

This option makes the child suspense components to show their contents in order from the first one to the last.
For example, consider the same code from the previous post; but this time with "revealOrder" property set to "forwards":

Now if the FirstSuspendingComponent resolves first, it will show its content immediately. But if the SecondSuspendingComponent resolves before the FirstSuspendingComponent, It will wait for the FirstSuspendingComponent to resolve. After that, they both will display their contents at the same time.

2. backwards

"backwards" actually acts as the reverse of the "forwards." Every Suspense component will wait for other Suspenses which came after it to resolve before showing its content.

PR:

Add forwards and backwards options to SuspenseList #15918

sebmarkbage posted on Jun 19, 2019

Builds on top of #15902

I'm not super happy with this implementation yet but it seems to work. I also need more tests.

So putting it out there as an early review.

View on GitHub

What React team is working on? (part one): SuspenseList component

Eddie — Mon, 22 Jul 2019 17:01:30 +0000

About one month ago, I saw some interesting commits on the master branch of the React repository.
Sebastian Markbage, chief-developer of React team, was working on something called SuspenseList: a component that is supposed to direct and orchestrate several other Suspense components.

<SuspenseList> Demo

Through the first commits, the basic functionalities of the SuspenseList component are completed, which gives us an API like this:

Let’s suppose we have two components in this example: The FirstSuspendingComponent and the SecondSuspendingComponent.
These components will throw a promise in their first render and will be suspended then.

So after the first render pass, we will see both “loading first” and “loading second” spans on the screen.
Now the FirstSuspendingComponent resolves its promise and tries to display its content, but it cannot. That is because the SecondSuspendingComponent is still suspended and the "revealOrder" property of their first SuspenseList parent component is equaled to "together."
Therefore, the FirstSuspendingComponent still shows its fallback (the "loading first" span) and waits for the SecondSuspendingComponent to finish its work. After that, they both will be displayed at the same time.

https://github.com/facebook/react/pull/15902