SolidJS•17mo ago

If I'm using createResource, why would I use Suspense?

For example if I have

function Loader() {
  const [resource] = createResource(fetchResourceFn);
  return <Suspense fallback={<div>Loading....</div>}>
          <ResourceRenderer resource={resource()} />
      </Suspense>;
}

function Loader() {
  const [resource] = createResource(fetchResourceFn);
  return <Suspense fallback={<div>Loading....</div>}>
          <ResourceRenderer resource={resource()} />
      </Suspense>;
}

This doesn't pass typescript type checking because you still need to check if resource() is undefined or not, even though Suspense shouldn't render the ResourceRenderer until createResource is finished with its async request?

4 Replies

autumncicadaOP•17mo ago

So why would you ever use Suspense over Switch + Match?

lxsmnsyc•17mo ago

Basically createResource and Suspense is like a pair. Suspense displays a fallback when createResource is accessed, and in SSR, createResource can be awaited or streamed if read inside Suspense. However, Suspense doesn't guarantee that the value has been resolved before the UI gets to access the value, which leads to the known "issue" of accessing undefined values, which is why you use Switch/Show to guarantee that the value exists first before you access it. The reason this happens is because of Solid's concurrent rendering. Unlike the original implementation (React), Solid is non-blocking, so evaluation of the component continues even if it suspends. Now if we talk about patterns, Suspense + ErrorBoundary allows you to build scalable fallback UI, which is what conditional rendering cannot do, and is a bit more tedious to do.

foolswisdom•17mo ago

Maybe this doc helps a bit https://docs.solidjs.com/references/api-reference/control-flow/Suspense#understanding-the-purpose-of--in-solid

autumncicadaOP•17mo ago

🤦 of course the answer to my exact question is in the docs thanks for the help all Seems like the nicest pattern for this is

function Loader() {
  const [resource] = createResource(fetchResourceFn);
  return <Suspense fallback={<div>Loading...</div>}>
    <Show when={resource()} keyed>
      {(resourceVal) => <ResourceRenderer resource={resourceVal}/>}
    </Show>
  </Suspense>
}

function Loader() {
  const [resource] = createResource(fetchResourceFn);
  return <Suspense fallback={<div>Loading...</div>}>
    <Show when={resource()} keyed>
      {(resourceVal) => <ResourceRenderer resource={resourceVal}/>}
    </Show>
  </Suspense>
}

Gaming

Programming

If I'm using createResource, why would I use Suspense?