Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
useSWRをuseContextの代わりに使ってみる試み
Search
Kanon
August 16, 2024
1
390
useSWRをuseContextの代わりに使ってみる試み
React Osaka Reboot
https://react-osaka.connpass.com/event/320355/
Kanon
August 16, 2024
Tweet
Share
More Decks by Kanon
See All by Kanon
変な先入観を捨てて、 明日から勉強会・カンファレンス登壇 してみない?
ysknsid25
0
1
Google I/O 2024で発表されたFirebase Data Connectを試してみた
ysknsid25
1
22
東遊園地近辺のおすすめランチ・カフェ
ysknsid25
3
200
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
472
290k
How to name files
jennybc
75
98k
Optimising Largest Contentful Paint
csswizardry
30
2.8k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Producing Creativity
orderedlist
PRO
340
39k
Building Your Own Lightsaber
phodgson
101
6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
We Have a Design System, Now What?
morganepeng
48
7.1k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Documentation Writing (for coders)
carmenintech
65
4.3k
The Pragmatic Product Professional
lauravandoore
31
6.2k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Transcript
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 ご清聴、あざざました