My SWR is causing UI to blink in every 2 seconds on focus or while changing route. What is the problem here? How do I prevent UI blinks?

[sushanyadav]

const getTests = ({ a, v }) => {
  const k = v.map((c) => {
    const k = useSingleTest({ a, c }); // this has all the swr stuffs inside
    return k;
  });

  return k;
};

export const useMultipleTests = ({ a, v }) => {
 const h = getTests({ a, v });
  
const mutate = () => vaults.forEach((v) => { v.mutate() });

  const err = h.filter((r) => {
    return r.error;
  });

  const response = h.filter((i) => {
    return !i.error && i.data;
  });


  const data = response.map((o) => {
    return o.data;
  });

  return {
    data: data ?? undefined,
    error: err,
    isLoading: !readableErrors && !vaults,
    mutate: mutate,
  };
};

Using the hook:

 const { isLoading, data } = useMultipleTests({
    a: 'test',
    v: [test1, test2, test3],
  });

[koba04]

@sushanyadav
You can disable the behavior by configuring the options of useSWR or using the useSWRImmutable hook instead.
https://swr.vercel.app/docs/revalidation

[sushanyadav]

I don't want to disable this behavior.
But I figured out where the problem was:
I was returning data in this way:

data: isValidating ? undefined : data,

which was causing the UI to blink.

So I fixed it by returning data like this with no conditions:

data: data