● RTK Query での効率的な初期データ管理とレンダリング最適化

課題

Next.jsのページコンポーネントでよくある実装パターンとして、以下のような流れがあります：

1. サーバーサイドで初期データを取得
2. クライアントサイドでRTK Queryを使用して最新データを取得
3. データの更新があった場合に画面を更新

この実装で注意したいのが、不要なレンダリングです。単純な実装では以下のような問題が発生します：

1. 初回レンダリング
2. RTK Query のローディング開始時のレンダリング
3. データ取得完了時のレンダリング

解決方法 これらの課題を解決するカスタムフックを実装してみましょう

type PageData = {
  title: string;
  content: string;
  lastUpdated: string;
};

type UsePageDataProps = {
  initialData: PageData;
};

export const usePageData = ({ initialData }: UsePageDataProps) => {
  const { data } = useGetPageDataQuery(undefined, {
    selectFromResult: ({ data }) => ({
      data: data ?? initialData,
    }),
  });

  return { data };
};

これでレンダリング回数が2回になります