React RouterのsetSearchParamsをuseEffect内で呼び出してブラウザバックがおかしくなった

前提、setSearchParams関数はnavigate関数と同じでブラウザの履歴(history api)にデータを突っ込んでいる。要するにhistory.push相当のことを内部でやっている。

自分が書いたコードは以下の通りで、引き起こしたバグは「ブラウザバックをn回以上しないと、バックしない」というものだった。

const useExampleHooks = (limit: number) => {
  const [searchParams, setSearchParams] = useSearchParams();

  // 中略
  useEffect(() => {
    setSearchParams({ offset: offset.toString(), limit: limit.toString() });
  }, [offset, limit, setSearchParams]);
}

具体的にどういうことが起きていたかというと、以下の通り。

1. このフックスを呼び出すコンポーネントにページ遷移する
2. コンポーネントがマウントされる時に、setSearchParamsが呼び出される
3. 他にも良くないコードがあって何回かuseEffectが実行される

これによってコンポーネントが再レンダリングされるたびに、history.push相当のことが行われており、色々とn回、つまりコンポーネントの再レンダリング回数分のバック操作が必要になってしまった。

そもそも、useEffect必要なくね？ってことに気づいたので、削除して事なきを得た。