On a streamed React 19 page, three sibling <Suspense> boundaries finish loading in a different order than they appear in the document. In what order does their content appear to the user, and how would you make a group of boundaries reveal top-to-bottom instead?

## What React actually guarantees Streaming writes a boundary's chunk the moment that boundary's content is ready. There is no queue that re-sorts chunks into document order — that would reintroduce head-of-line blocking, which is the exact thing streaming exists to remove. So with three siblings whose data takes 300 ms, 900 ms and 100 ms, the user sees the third appear, then the first, then the second. The one ordering rule React does enforce is **containment**. A boundary nested inside another cannot be revealed while the outer boundary is still showing its fallback: the outer fallback occupies the DOM, so the inner boundary's slot does not exist yet. If the inner content resolves first, React holds it until the outer boundary is swapped in, then applies it. Siblings have no such relationship, and none is inferred from their order in the JSX. ## Why unordered reveal is sometimes a problem It is not always a problem — independent widgets appearing as soon as they can is usually the desirable behaviour, and it is what you paid for. It becomes a problem when: - The sections form a **sequence the reader consumes in order** — steps, a ranked list, a chronological feed. Filling in 3, 1, 2 reads as broken. - The reveals **move each other around**, because the fallbacks are smaller than the real content. That is layout shift, and it is worse when it happens three times at unpredictable moments. - The page feels **twitchy**: many small independent pops over two seconds is often perceived as slower than one coordinated reveal, even though it is objectively earlier. ## Techniques for controlling order in stable React **Nest to serialize.** Containment is a real guarantee, so express the desired order as tree structure: ```jsx <Suspense fallback={<SkeletonA />}> <SectionA /> <Suspense fallback={<SkeletonB />}> <SectionB /> <Suspense fallback={<SkeletonC />}> <SectionC /> </Suspense> </Suspense> </Suspense> ``` B can never appear before A, and C never before B. The cost is that a fast C now waits on a slow A, and the markup couples sections that are otherwise unrelated. Use it when the order is genuinely part of the meaning. **Group to reveal together.** One boundary around all three means one fallback and one reveal — nothing pops individually: ```jsx <Suspense fallback={<GroupSkeleton />}> <SectionA /><SectionB /><SectionC /> </Suspense> ``` The group now waits for its slowest member, which is the honest tradeoff: coherence bought with latency. **Split the difference.** Give the above-the-fold region its own boundary so it reveals early, and group the rest. Most real pages end up here rather than at either extreme. **Make the reveal cheap instead of ordered.** Often the actual complaint is jank, not order. Fallbacks sized like the real content remove the shift, and then out-of-order arrival is barely noticeable. Fixing the perception is usually better than serializing the data. ## About SuspenseList React has an experimental `SuspenseList` component with a `revealOrder` prop, designed precisely to coordinate a set of sibling boundaries without nesting them. **It is not part of the stable React 19 release** — it exists only in experimental builds. Knowing it exists is fine and shows you have read the direction of travel; presenting it as the answer for a production app in React 19 is a factual error an interviewer will catch. Say what it is for, then give the structural answer you can actually ship. ## Interaction with the rest of the model Two boundaries in the tree do not compete for priority: neither is "more important" to React, and there is no prop that ranks them. If one section must be first, it must either be in the shell (not behind a boundary at all) or be the container of the others. Deciding which sections earn a place in the shell — and therefore reveal with the first byte — is usually the higher-leverage version of this conversation. ## Answer shape Name completion order as the rule, containment as the only guarantee, nesting and grouping as the two levers, SuspenseList as experimental-not-shipped, and finish on the judgment: order the reveal when it is semantically required, otherwise fix the layout shift and let the content arrive as fast as it can.