NOTE 086 / 2021年
取得と再検証の距離を縮める
SWR の更新を機に、取得と再検証の考え方をまとめます。
読了目安 約2分
SWR は、取得したデータをキャッシュし、必要に応じて再検証する仕組みです。画面を開くたびに同じデータを取りに行く構成と比べて、体感の速さが変わります。一方で、キャッシュをいつ無効にするかを決めておかないと、古い表示が残ります。
更新の後は、関連するキーを明示して再検証します。何を同じデータとして扱うかをキーの設計で表現すると、画面ごとの実装が簡潔になります。
押さえたい点
- 01キーの設計を先に決める
- 02更新後の再検証を明示する
- 03古い表示が残る場面を確認する
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- React 学習ガイド 外部サイトreact.dev
- React リファレンス 外部サイトreact.dev
- React で考える 外部サイトreact.dev
- useState リファレンス 外部サイトreact.dev
- useEffect リファレンス 外部サイトreact.dev
- useContext リファレンス 外部サイトreact.dev
- TypeScript ドキュメント 外部サイトtypescriptlang.org
- TypeScript の設定 外部サイトtypescriptlang.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- Pokemon API 外部サイトpokeapi.co
- PokeAPI 外部サイトpokeapi.co
- web.dev 外部サイトweb.dev
- W3C WAI 外部サイトw3.org