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>;
}

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()

resource()

resource()

resource() is undefined or not, even though Suspense shouldn't render the ResourceRenderer until createResource is finished with its async request?

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

Similar Threads

Similar Threads

Similar Threads