【React / Next】SWRのfetch中のチラつきをなくす

SWRのfetch中のチラつきをなくすための方法です。
公式に書かれていました。

環境

• React: 17.0.2
• Next: 11.1.3
• SWR: ^1.2.2

サンプルコード

公式から拝借

SWR

const useUser = (id) => {
  const { data, error } = useSWR(`/api/user/${id}`, fetcher)

  return {
    user: data,
    // ここ
    isLoading: !error && !data,
  }
}

component

export const Component = () => {
  const { user, isLoading } = useUser(id);

  if (isLoading) {
    return <Spinner />;
  }

  return (
    // 省略
  );
};

参考