Bug: SuspenseList crash

[gaearon]

https://codesandbox.io/s/nostalgic-frost-53gys?file=/src/App.js

import * as React from "react";

function S(props) {
  return <React.Suspense {...props} />;
}

export default function App() {
  return (
    <React.unstable_SuspenseList revealOrder="forwards">
      <S fallback={null}>
        <Bad />
      </S>
      <S fallback={null}>
        <h1>wow</h1>
      </S>
    </React.unstable_SuspenseList>
  );
}

function Bad() {
  const [c, setC] = React.useState(0);
  read(c);
  const r = React.useRef(true);
  React.useEffect(() => {
    if (r.current) {
      r.current = false;
      setC((x) => x + 1);
    }
  }, [c]);
  return <h2>wow</h2>;
}

const cache = {};
function read(i) {
  if (cache[i]) {
    if (cache[i].result) {
      return cache[i].result;
    } else {
      throw cache[i].promise;
    }
  }
  cache[i] = {
    promise: new Promise((resolve) => {
      setTimeout(() => {
        cache[i].result = "foo";
        resolve();
      }, 1000);
    })
  };
  throw cache[i].promise;
}

[milobluebell]

i think it's because , you had thrown a promise object in read function,

function read(i) {
  if (cache[i]) {
    if (cache[i].result) {
      return cache[i].result;
    } else {
      // *** HERE ****
      throw cache[i].promise;
    }
  }
  cache[i] = {
    promise: new Promise((resolve) => {
      setTimeout(() => {
        cache[i].result = "foo";
        resolve();
      }, 1000);
    })
  };
  // *** and HERE ****
  throw cache[i].promise;
}

it interrupt your ideal rendering. and the error thrown by React in browser means that there isn't an fiberRoot could be founded