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.
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.
Top comments (0)