

next.jsでページネーションを実装しています。  
「{page}ページ目/{max_page}ページ中」と表示したい箇所があります。  
max_pageはSWRでデータ件数をフェッチしてきた後に Math.floor(データ件数/1ページあたりの表示件数）という風に計算しています。

max_pageについてはページネーション遷移しても値は変わらないので、固定化したいところですが、swrでフェッチしたタイミングで再計算するため、ページ番号をクリックするたび、max_pageがいったん0になって再計算されるため、表示がチラついてしまいます。

逆にuseMemoを使ってmax_pageの部分を固定値化しようとすると、useSWRのフェッチ取得のタイミングで初期値が計算されるので、初期値がうまく入りません（フェッチ取得前の0の値で固定されてしまう）。

useSWRでデータ件数を取得し、そのデータ件数から計算されたmax_pageを初期値に設定し、キャッシュ化したいのですが、うまい書き方はないでしょうか？


CC BY-SA 4.0
2022-02-21T06:04:49.477
86489
2022-02-22T10:14:44.230
2022-02-22T10:14:44.230
50588
50588
question
reactjs next.js
useSWRとuseMemoを組み合わせたい


キャッシュ化したいのであれば、`useRef` と `useEffect` を使ってみてはどうでしょうか。

[code]

    const previousMaxPage = useRef(maxPage);
    
    useEffect(() => {
      previousMaxPage.current = maxPage;
    }, [maxPage]);
    
[/code]


CC BY-SA 4.0
2022-02-21T15:33:54.903
86500
2022-02-21T15:33:54.903
51277
86489
answer