Looking for a state to describe "beforeLoad"

[My0sot1s]

function Stock() {
  const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher);
 
 
  if (isLoading) return <div className="skeleton" />;
  if (data?.length === 0) return <div className="empty"> no result </div>
 
  return (
    <>
      <div>${data}</div>
      {isValidating ? <div className="spinner" /> : null}
    </>
  );
}

As described in the example above, I want to display a “no result” empty state when the fetched data is empty. However, before the data fetching begins — during the initial React render — both isLoading and isValidating are false, which means I can’t return a loading state. As a result, the component mistakenly renders the empty state. How can I correctly detect the state where “the request has not yet started”?

[manimovassagh]

The issue is that on the very first render, SWR hasn't kicked off the fetch yet, so data is undefined, isLoading is false (briefly), and isValidating is false. Your data?.length === 0 check catches that undefined state and shows the empty state prematurely.

The fix is to treat undefined data as the loading state, since it means "we haven't fetched yet":

function Stock() {
  const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher);

  // data is undefined before the first fetch completes
  if (isLoading || data === undefined) return <div className="skeleton" />;
  if (data.length === 0) return <div className="empty">no result</div>;

  return (
    <>
      <div>${data}</div>
      {isValidating ? <div className="spinner" /> : null}
    </>
  );
}

The key insight: data === undefined means "never fetched", while data.length === 0 means "fetched but empty". These are two different states that should be handled separately.

Alternatively, if you want a single clean check, you can use the suspense option so React Suspense handles the loading boundary:

function Stock() {
  const { data, isValidating } = useSWR(STOCK_API, fetcher, { suspense: true });

  // data is always defined here because Suspense handles the loading state
  if (data.length === 0) return <div className="empty">no result</div>;

  return (
    <>
      <div>${data}</div>
      {isValidating ? <div className="spinner" /> : null}
    </>
  );
}

// Wrap with Suspense boundary
<Suspense fallback={<div className="skeleton" />}>
  <Stock />
</Suspense>

With suspense: true, the component suspends until data is available, so you never have to deal with the "before load" state manually.