`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, aSuspense 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 insteadsolid
- In solid, aSuspense 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. createEffectonMount 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>
