`Suspense` deep dive 🐬
I am dealing with some inconsistencies in how Suspense works between react vs solid while working on #solid-three. I wanna check up if my understanding of their mechanics is correct:
react
- In react, a
Suspense is triggered by throwing a promise. This needs to be done in either the component-body or the jsx, no effects/memos. All code will run until that point. The code throws before anything can mount, nothing runs after the throw: no useEffect and useLayoutEffect, child-components do not run. The suspense-boundary catches the promise and re-renders its children once the promise is resolved.
- ✔️ <Suspense><div>{resource()}</div></Suspense>
- ✔️ <Suspense>{() => { resource(); return <></> }</Suspense>
- ✔️ <Suspense><Component prop={resource()}></Suspense>
- ❌ <Suspense>{() => { useLayoutEffect(() => resource()); return <></> }</Suspense> will throw instead
solid
- In solid, a Suspense is a 'special' signal. To trigger a Suspense boundary, the signal needs to be added directly in the jsx-tree or used inside a createRenderEffect or a createMemo. Unlike react, using it directly inside the component body will not trigger Suspense. Nothing throws, so code below the resource will still run. All siblings of the suspense will do their initial run. createEffect and onMount will only run once the resource is resolved, createRenderEffect and createMemo do run during initial run.
- ✔️ <Suspense><div>{resource() || resource}</div></Suspense>
- ❌ <Suspense>{() => { resource(); return <></> }</Suspense>
- ❌ <Suspense><Component prop={resource() || resource}></Suspense>:(unless Component adds it to the jsx-tree or uses it inside createRenderEffect / createMemo)
- ✔️ <Suspense>{() => { createRenderEffect(() => resource()); return <></> }</Suspense>2 Replies
Will in solid under the hood,
<Suspense><div>{resource()}</div></Suspense>:
- first create a div with text-content untitled and once resource is resolved append this div to its parent with the contents of the resolved resource?
- or will it only create the div once resource is resolved, immediately with the correct text-contents?answer a
suspense is only for stopping effects, and rendering a fallback