TanStack Router - useLocationフックの意外な振る舞いについて
TanStackのissueで話題になっていたTanStack RouterのuseLocationフックがreact-router-domのそれとは違う振る舞いをする件、私もハマるだろうなあと思ったのでメモを残します。
なにが問題か？
ルート内で useLocation フックを使ってURL取得していると、ページ遷移時に再レンダリングされてしまう。
たとえば、ページAからBに強制遷移したときに、URLがBのものに変わるとAが再レンダリングされ、遷移コードが再度実行され、ページのちらつきが発生したり、無限ループになったりする。
なぜ起こるか？
これが起こる理由は、ブラウザのURLの変化と、Routerの内部状態の変化のタイミングがズレているせいです。
こちら のフローを見ると、URLが変わったあと、新しいページがマウントされるまで様々な処理が走りますが、この間もとのページはルーター内でマウントされたままです。
しかしURLが変わっているので、もとのページで useLocation が新しいURLを返し、再レンダリングが起こります。
どう対応するか？
URLをみてなにか処理をしたい場合は useMatch を使うという対応がissueで紹介されています。
この問題について、TanStackチームはひとまずこのふるまいをドキュメントに詳しく書くことにしたようです。 今後どうしていくかは当該のイシューで議論されるようなので、興味のある方はSubscribeしておくとよいでしょう。