2

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を初期値に設定し、キャッシュ化したいのですが、うまい書き方はないでしょうか?

1 件の回答 1

0

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

const previousMaxPage = useRef(maxPage);

useEffect(() => {
  previousMaxPage.current = maxPage;
}, [maxPage]);
1
  • 回答ありがとうございます。useRefを利用した場合、該当の変数をDOMの属性値には設定できますが、表示項目として利用できないため、難しそうです。
    – redara
    2022年2月22日 2:57

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。