React Router 6.4 メモ

普通に使う分には loader 関数の中は普通の TS のコード
- React 非依存で嬉しい
SWR を使っていたときは↓のようなコードを書いていた
- error と loading の UI の表示は手続き的だし規約として強制できていない
  - うっかり error の表示の実装を忘れてしまうかも
    - error の表示は errorElement を設定するという宣言的な書き方かつ規約として強制できる
  - loading の方は loader を await するまで navigation を待つのでそもそも不要
    - それでも loading を表示したいときは defer を使う
- ↑をまとめると、データフェッチ時に「エラーだった場合にエラーを表示すること」と「ロード中にローディング表示をすること」を規約化できて嬉しい

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

odan

<Await> が面白い

重たい処理を loader で await しないで promise を defer に渡して return する
useLoaderData で取得した promise を <Await> の resolve を使うと、Suspense の仕組みを使って解決される
- loading 表示をしたいなら fallback にコンポーネントを渡せば良い
エラーは useAsyncError で取得できる

Promise を渡す、という点で use に似た雰囲気を感じる

odan

使い方メモ

ナビゲーションとともに取得されてほしいデータは loader に書く
重たい fetch は loader で defer するか、従来どおり SWR や React Query などのライブラリに任せる
- 後者のライブラリはちゃんと Suspense をサポートしている

odan

そう考えると、loader には「ナビゲーションとともにデータを取得する機能」があるので loader と React Query などのライブラリは別軸の仕組みとして捉えて良さそう

まさにドキュメントにあるこの記述の通り

In this way, React Router is about timing, where React Query is about caching.
https://reactrouter.com/en/main/guides/data-libs

odan

React Router 用の React Query から Suspense の仕組みを抜いたキャッシュ付きの fetch ライブラリがあると便利そう