useSWRをuseContextの代わりに 使ってみる試み Kanon (@samurai_se) #react_osaka 1

2 自己紹介 ↓詳しくは↓ ● 本業はKtor(Kotlin), Next.jsで副業がLaravel, Nest.js,Next.js ● Kobe.tsという勉強会を主催しています ● 地方コミュニティが好き Kanon アニオタ声豚酒カスラーメンレンジャー 水瀬いのり無限恒久永遠推し samurai_se

きっかけ 3

クラスメソッドのReact事情大公開スペシャル #3 4

このスライド 5

6 わかるような…？

useSWRとは 7

Vercel社製のデータフェッチライブラリ 基本的な使い方 8

useContextとして使ってみる 9

更新を伴わないcontextとして使う 10

初期表示時 11

カウントアップすると…？ 12

更新を伴うcontextとして使う 13

画面イメージ 14

カウントボタンを押す 15

おわりに ● だいたいこういうイメージで使えば、多くの場面で useContextではなくswrでグローバルに値を共有できそ う ● 直接ライブラリの導入を抑えたければ、useContextの 代わりにswrを使ってみてもよさそう ● ただswrのキャッシュ管理に使われているのは useContextなので、直接入れるか間接的に入れてるか の違い 16

17 📢 おわりに宣伝 🙏 オフラインLT会を 神戸で開催してます！ TS＋周辺技術 Figma、npmなどなど 範囲が広いので登壇しやすい！

18 ご清聴、あざざました