I’m encountering an issue in React 19 when using the use hook inside multiple Suspense boundaries, I have two components, and , that are supposed to behave similarly, but they exhibit different rendering behaviors when rendering items wrapped in Suspense

in my code below, I have two components, and , that render lists of items with each item wrapped in a Suspense boundary, the items should render at different intervals based on the wait times provided to each Suspense component

import { Suspense, use, useState } from "react";

const f = async (wait) => {
  await new Promise((resolve) => setTimeout(resolve, wait));
  return new Date();
};

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Expected />
      <Unexpected />
    </>
  );
};

const Expected = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <div>👍</div>
      <button onClick={() => setOpen(!open)}>{open ? "close" : "open"}</button>
      {open && <List wait={[1000, 2000, 3000, 4000, 5000]} />}
    </>
  );
};

const Unexpected = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <div>🤔</div>
      <button onClick={() => setOpen(!open)}>{open ? "close" : "open"}</button>
      {open && <List wait={[1000, 2000, 3000, 3000, 5000]} />}
    </>
  );
};

const List = ({ wait }) => {
  const [t1] = useState(f(wait[0]));
  const [t2] = useState(f(wait[1]));
  const [t3] = useState(f(wait[2]));
  const [t4] = useState(f(wait[3]));
  const [t5] = useState(f(wait[4]));

  return (
    <>
      <Suspense fallback={<div>Loading No.1 ...</div>}>
        <Item time={t1} />
      </Suspense>
      <Suspense fallback={<div>Loading No.2 ...</div>}>
        <Item time={t2} />
      </Suspense>
      <Suspense fallback={<div>Loading No.3 ...</div>}>
        <Item time={t3} />
      </Suspense>
      <Suspense fallback={<div>Loading No.4 & No.5 ...</div>}>
        <Item time={t4} />
        <Item time={t5} />
      </Suspense>
    </>
  );
};

const Item = ({ time }) => {
  const t = use(time);

  console.log("render item");

  return <div>{t.toISOString()}</div>;
};

export default App;

the two components, and , should behave in the same way: items No.1 to No.3 should be displayed one second apart, and No.4 and No.5 should be displayed together, two seconds after No.3

the behavior is inconsistent between the two components, in , item No.3, which should be displayed separately, is delayed and only shown after No.4 and No.5, which breaks the expected Suspense behavior

I expected both components to render their items in the same way, with each Suspense boundary handling its respective items independently, specifically, I expected No.1 to No.3 to render sequentially with a one-second delay, and No.4 and No.5 to appear together after five seconds, regardless of the minor difference in wait times

instead, in the component, No.3 seems to be delayed and is only rendered after No.4 and No.5, even though it’s in a separate Suspense boundary

is this behavior a bug in React 19, or am I missing something about how Suspense and use are supposed to work together in this version? how can I ensure consistent behavior across different Suspense boundaries ?