Repository: react
Issue: Bug: Nested SuspenseList may display fallbacks while the component is loaded on re-render
Labels: Type: Needs Investigation,Component: Concurrent Features

<!--
  Please provide a clear and concise description of what the bug is. Include
  screenshots if needed. Please test using the latest version of the relevant
  React packages to make sure your issue has not already been fixed.
-->

**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_

0. Setup

Let's suppose we have three components `<A />` (**not** lazy loaded), `<B />` (**not** lazy loaded) and `<C />` (lazy loaded).

In other words:

```jsx
import A from './A';
import B from './B';
const C = React.lazy(() => import('./C'));
```

1. Render

```jsx
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>
)
```

2. Update the component (component now shows A, B, and C)

```jsx
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>
)
```

3. 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 />`.

<!--
  Your bug will get fixed much faster if we can run your code and it doesn't
  have dependencies other than React. Issues without reproduction steps or
  code examples may be immediately closed as not actionable.
-->

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

<!--
  Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a
  repository on GitHub, or provide a minimal code example that reproduces the
  problem. You may provide a screenshot of the application if you think it is
  relevant to your bug report. Here are some tips for providing a minimal
  example: https://stackoverflow.com/help/mcve.
-->

## 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](https://github.com/dubzzz/fast-check/) against React library.

See https://github.com/dubzzz/react/commit/e2cb4776ea3634fab2021d83cb8259bde03c0f3a