lazy/Suspense behavior different with react

// index.tsx
import { h, render }      from 'preact';
import { lazy, Suspense } from 'preact/compat';

const Outer = lazy(() => import('./Outer'));

render(
  <Suspense fallback={<div>loading outer...</div>}>
    <App/>
  </Suspense>,
  document.getElementById('app')!,
);

// Outer.tsx
import { FunctionComponent, h } from 'preact';
import { lazy, Suspense }       from 'preact/compat';

export const Outer: FunctionComponent = () => {

  const Inner = lazy(() => import('./Inner'));

  return (
    <div>
      <div>Outer</div>
      {/*<Suspense fallback={<div>loading inner...</div>}>*/}
        <Inner/>
      {/*</Suspense>*/}
    </div>
  );
};

export default Outer;

// Inner.tsx
import { FunctionComponent, h } from 'preact';

export const Inner: FunctionComponent = () => <div>Inner</div>;

export default Inner;

With react, I don’t need that <Suspense> in Outer.tsx to make the code work. But with preact/compat, if I comment the <Suspense> in Outer.tsx like above, the top-level (in index.tsx) <Suspense> won’t disappear after the Inner.tsx loaded, and sometimes the page will crash.

I’m not sure if this difference is by design or not since I can’t found related info in changelog.

[andrewiggins]

Yup!

[whitetrefoil]

What a good news!🥳 So I believe this can be closed once your PR get merged?