react router 6.6 useLoaderData

概要

useLoaderData を使うには Route に前もって loader を登録しておく必要があり登録していない状態で使うとエラーとなる。この登録された loader は component が描写される前に実行され実行結果は context 内に保存される。そして component 内で useLoaderData を使ってこれを取り出すという流れだ。loader を実行するためのトリガーではないということを念頭に置いておきたい。

これとは別に「useRouteLoaderData」なる Hook がある。これは Route の id プロパティに名前をつけてその名前の loader を呼び出すものである。あくまでその Route の中でもう一度 loader を実行したいときに使うためのものであって他の Route の loader を使えるようにするものではない。

結論

これらを踏まえると Route に loader を登録するとなにかのイベントハンドラを交えて表示を大きく変更させるといった場合に汎用性をぐっと落とすことになる。