useSWR causes re-render with revalidateIfStale when data does not change

[oste]

The docs mention deep comparison should prevent unnecessary re-renders here https://swr.vercel.app/docs/advanced/performance#deep-comparison

However, I am getting re-renders using code very similar to the next.js example here https://swr.vercel.app/docs/with-nextjs

When I log out data in the Article component the data does not change but it is output twice indicating that there was a re-render.

What is causing this to happen? It seems data should only be output once since it did not change.

I even mocked my fetcher to return like this and the problem still happens

export const fetchList = (config?: { ssr: boolean }) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ test: 'sss' });
    }, 30);
  });
};

Edit:

here is an example forked from the Next.js SSR example here https://swr.vercel.app/examples/ssr:

https://codesandbox.io/s/elastic-resonance-kyxkp

The only update I made was to change const { data, error } = useSWR(API); to const { data, error } = useSWR(API, fetcher);

This causes Is data ready? true to log twice

[gempir]

I also don't fully understand when a re-render is triggered.

I use useSWRImmutable and before I call it, I prefill the cache from server side rendering props.

<SWRConfig value={{provider: (): Map<string, any> => new Map([[cacheKey, {someData}]])}}>
...

And I validated with useSWRConfig() that the cache is used and filled before the useSWRImmutable gets called and thats the case. The cache has an entry and the cache key directly hits.

But still for some reason it causes 1 more render than required. isValidating always stays false.

    const {cache} = useSWRConfig();
    console.log("cacheHit", typeof cache.get(cacheKey) !== "undefined");

    let {data: rawData, isValidating} = useSWRImmutable<RawProductDetailV2Response>(cacheKey, contentApiFetcher);
    console.log(rawData, isValidating);

I couldn't use fallbackData because that seems to have some odd behaviours with revalidation. Then It wouldn't correctly fetch data when the key was changed.

[nsunga]

@oste Did you end up finding an answer to this?

Its so puzzling to understand this

Here's an issue that got marked as completed - but I still dont think it should have: #1952

ie. if we fetch the data on server side and pass it as a prop to the component, the same component will still render twice

age.tsx

"use client";

import useSWR from 'swr';
import { fetchAge } from '@/app/utils/fetch-age';

interface AgeProps {
  initialAge?: number | Promise<number>;
}

export default function Age({ initialAge }: AgeProps) {
  // Key is null if server data exists; otherwise it's 'client-age'
  const { data, error, isLoading, isValidating } = useSWR(
    initialAge ? null : 'client-age',
    () => fetchAge(5000, { isClient: true }),
    {
      revalidateIfStale: false,
      revalidateOnFocus: false,
      revalidateOnReconnect: false,
    }
  );

  // 3. UI Logic
  const finalAge = initialAge ?? data;
  const innerContent = finalAge ? `Hello I am ${finalAge} years old!` : '🌀 Loading...';

  console.log('Age component rendered with: ', innerContent); // gets logged twice - even with strict mode disabled

  return (
    <div>
      <h2 className="font-semibold leading-10 tracking-tight text-black">
        {innerContent}
      </h2>
    </div>
  );
}

fetch-age.tsx

interface FetchConfig {
  isClient?: boolean;
}

export async function fetchAge(
  overrideTimeout?: number, 
  config: FetchConfig = {} // Defaulting to an empty object
) {
  const timeout = overrideTimeout ?? 3000;
  
  await new Promise((res) => setTimeout(res, timeout));

  const age = Math.floor(Math.random() * 100) + 1;

  // Now TypeScript knows isClient might exist
  console.log(config.isClient ? `Age resolved on client: ${age}` : `Age resolved on server: ${age}`);

  return age;
};

[nsunga]

Closing the loop on this - but the original post could be an entirely different issue since this was 5 years ago

My re-rendering issue has been resolved #4210 (comment)