Bug: Nested SuspenseList may display fallbacks while the component is loaded on re-render

React version: 0.0.0-experimental-e5d06e34b

Hoping this can be helpful for you. Here is what looks to be a bug with concurrent mode and nested SuspenseList.

Steps To Reproduce

In concurrent mode only

1. Setup

Let’s suppose we have three components <A /> (not lazy loaded), <B /> (not lazy loaded) and <C /> (lazy loaded).

In other words:

import A from './A';
import B from './B';
const C = React.lazy(() => import('./C'));

1. Render

render(
  <SuspenseList key="1" revealOrder="forwards">
    <SuspenseList key="1.1" revealOrder="forwards">
      <Suspense key="1.1.a" fallback={<div>Loading A</div>}>
        <A />
      </Suspense>
    </SuspenseList>
  </SuspenseList>
)

1. Update the component (component now shows A, B, and C)

render(
  <SuspenseList key="1" revealOrder="forwards">
    <SuspenseList key="1.1" revealOrder="forwards">
      <Suspense key="1.1.a" fallback={<div>Loading A</div>}>
        <A />
      </Suspense>
      <Suspense key="1.1.b" fallback={<div>Loading B</div>}>
        <B />
      </Suspense>
      <Suspense key="1.1.c" fallback={<div>Loading C</div>}>
        <C />
      </Suspense>
    </SuspenseList>
  </SuspenseList>
)

1. Output is: A / Loading B / Loading C. While B has already been loaded (not lazy loaded). If I understand well the behaviour of forwards I would have expect to have A / B / Loading C instead.

Please note that the behaviour is not the same if I do not use nested <SuspenseList />.

CodeSandbox: https://codesandbox.io/s/mutable-rain-3ikor GitHub pages repro: https://dubzzz.github.io/react-suspenselist-bug/build/ GitHub pages source code: https://github.com/dubzzz/react-suspenselist-bug

The current behavior

Output is: A / Loading B / Loading C with nested SuspenseList

The expected behavior

Output is: A / B / Loading C with nested SuspenseList

How did I found this bug?

This potential bug has been discovered while I was trying to run property based tests based on fast-check against React library.

See https://github.com/dubzzz/react/commit/e2cb4776ea3634fab2021d83cb8259bde03c0f3a

[gaearon]

I also opened https://github.com/facebook/react/issues/18669 for the broader fuzz question.

[hosseinmd]

What is the latest version of concurrent mode?