Repository: react
Issue: Bug: Inconsistent behavior with Promises near the root
Labels: Type: Bug

Just jotting down some cases I found confusing.
Ideally for each case, it should either work, or should fail in some obvious way.

## Working: startTransition + 1000ms Promise root

```js
import { startTransition } from "react";
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

let promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve(<h1>hi</h1>);
  }, 1000);
});

startTransition(() => {
  root.render(promise);
});
```

https://codesandbox.io/s/goofy-rui-8g6sxh?file=/src/index.js

## Working: startTransition + root component + 5000ms Promise child

```js
import { startTransition } from "react";
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

let promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve(<h1>hi</h1>);
  }, 5000);
});

function Foo() {
  return promise;
}

startTransition(() => {
  root.render(<Foo />);
});
```

https://codesandbox.io/s/epic-cookies-v94rk2?file=/src/index.js

## Working: No startTransition + root component + 5000ms Promise child

```js
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

let promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve(<h1>hi</h1>);
  }, 5000);
});

function Foo() {
  return promise;
}

root.render(<Foo />);
```

https://codesandbox.io/s/zen-allen-2u1nr7?file=/src/index.js

## Working: startTransition + root component + 1000ms Promise in state

```js
import { useState, startTransition } from "react";
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

function Foo() {
  const [promise, setPromise] = useState(
    new Promise((resolve) => {
      setTimeout(() => {
        resolve(<h1>hi</h1>);
      }, 1000);
    })
  );
  return promise;
}

startTransition(() => {
  root.render(<Foo />);
});
```

https://codesandbox.io/s/immutable-moon-2h3dqz?file=/src/index.js

## Working: startTransition + root component + 1000ms Promise in state + use

```js
import { use, useState, startTransition } from "react";
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

function Foo() {
  const [promise, setPromise] = useState(
    new Promise((resolve) => {
      setTimeout(() => {
        resolve(<h1>hi</h1>);
      }, 1000);
    })
  );
  return use(promise);
}

startTransition(() => {
  root.render(<Foo />);
});
```

https://codesandbox.io/s/hungry-carlos-1n8hqu?file=/src/index.js

## Crashes: startTransition + 5000ms Promise root

This doesn't work (with a confusing crash):

```js
import { startTransition } from "react";
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

let promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve(<h1>hi</h1>);
  }, 5000); // <--- I increased the delay
});

startTransition(() => {
  root.render(promise);
});

```

https://codesandbox.io/s/busy-torvalds-xgbcgh?file=/src/index.js

## Crashes: No startTransition + 1000ms Promise root

This doesn't work (with a confusing crash):

```js
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

let promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve(<h1>hi</h1>);
  }, 1000);
});

root.render(promise); // No startTransition
```

https://codesandbox.io/s/serene-payne-677ghp?file=/src/index.js

## Never resolves: No startTransition + root component + 1000ms Promise in state

```js
import { useState } from "react";
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

function Foo() {
  const [promise, setPromise] = useState(
    new Promise((resolve) => {
      setTimeout(() => {
        resolve(<h1>hi</h1>);
      }, 1000);
    })
  );
  return promise;
}

root.render(<Foo />);
```

https://codesandbox.io/s/musing-chaplygin-2udvbx?file=/src/index.js

## Never resolves: No startTransition + root component + 1000ms Promise in state + use

```js
import { use, useState } from "react";
import { createRoot } from "react-dom/client";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

function Foo() {
  const [promise, setPromise] = useState(
    new Promise((resolve) => {
      setTimeout(() => {
        resolve(<h1>hi</h1>);
      }, 1000);
    })
  );
  return use(promise);
}

root.render(<Foo />);
```

https://codesandbox.io/s/blue-butterfly-3xywp2?file=/src/index.js:0-400