lazy/Suspense behavior different with react
See original GitHub issue// 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.
Issue Analytics
- State:
- Created 4 years ago
- Comments:15 (11 by maintainers)
Top Results From Across the Web
React lazy, Suspense and Concurrent React Breakdown with ...
lazy () : lazy is a new API in React to aid in code splitting and importing components into your scripts — very...
Read more >Code splitting with React.lazy and Suspense - web.dev
The React.lazy method makes it easy to code-split a React application on a component level using dynamic imports. Copy code
Read more >Suspense for Data Fetching (Experimental) - React
It's a mechanism for data fetching libraries to communicate to React that the data a component is reading is not ready yet. React...
Read more >React lazy loading and performance - Retool
React.Suspense ... A component built with React.lazy() is only loaded when it is required to be displayed. While the lazy component is loading, ......
Read more >Use React.lazy and Suspense to Code-Split Your App
Suspense component will catch any React.lazy instances and then render just the one fallback component. So if we had the following, we'd still ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yup!
What a good news!🥳 So I believe this can be closed once your PR get merged?