Replies: 3 comments 4 replies
-
|
I have nested Suspense with preact 10.16.0 (and just upgraded to 10.18.0) and everything works fine. Would be good to know what else might be missing with Suspense before it is production ready. One thing I observed is that I am using Suspense for data fetching as well using the pattern of throwing a promise or error or returning the final result and it works fine but I see that between the throwing the promise to finally returning the result, the component tries to render rapidly many times. |
Beta Was this translation helpful? Give feedback.
-
|
@developit's response to this in Slack a couple weeks ago:
|
Beta Was this translation helpful? Give feedback.
-
|
Sorry for checking on this so much later again - but what's meant by "just using lazy()"? As in... without suspense? (Which unfortunately doesn't seem to be possible) |
Beta Was this translation helpful? Give feedback.
-
|
He meant that if you're just using suspense for lazy importing, there's nothing experimental there -- it's mostly set it stone. Other usages of suspense have less defined behavior. |
Beta Was this translation helpful? Give feedback.
-
|
Suspense fallback doesn't seem to work: <body>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/preact@10.19.2/compat",
"react-dom": "https://esm.sh/preact@10.19.2/compat",
"htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact"
}
}
</script>
<script type="module">
import { render, Suspense, lazy } from 'react-dom';
import { html } from 'htm/preact';
const FooBar = lazy(() => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(import('./src/foobar.js')), 2000)
})
});
export function MyApp() {
return html`
<l-container>
<h1>Host App</h1>
<hr class="mar-b-6" />
<${Suspense} fallback=${`<div>Loading...</div>`}>
<${FooBar} />
</${Suspense}>
</l-container>
`;
}
render(html`<${MyApp} />`, document.body);
</script>
</body>That renders the string "<div>Loading...</div>" rather than creating an element. I'm new to Preact and htm, so this may be known or I'm doing something wrong. |
Beta Was this translation helpful? Give feedback.
-
|
You have to do |
Beta Was this translation helpful? Give feedback.
-
|
haha thanks! |
Beta Was this translation helpful? Give feedback.
-
Hi all,
I am considering switching from React to Preact to speed up our production app and want to ask about the
<Suspense>implementation.I've tested the Preact switch 1.5 years ago and found that there was a compiling problem with nesting
<Suspense>(I am using react-app-rewired to configure CRA, not sure if that is related). I am curious if the latest v10.X version or maybe v11 have a more "mature" implementation of<Suspense>, since the v10 Preact doc still lists<Suspense>as experimental? (https://preactjs.com/guide/v10/switching-to-preact/#suspense-experimental)Thanks in advance.
Beta Was this translation helpful? Give feedback.
All reactions