ReactにSWRがあるとき🤣 ないとき😭 - クラスメソッドのReact事情大公開スペシャル#3

クラスメソッドのReact事情大公開スペシャル#3のLT会にて『ReactにSWRがあるとき🤣 ないとき😭』という内容で登壇しました。
https://classmethod.connpass.com/event/316669/

Transcript

1. ReactにSWRがあるとき🤣 ないとき😭 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio Kanon (@samurai_se) #クラスメソッド勉強会
2. 自己紹介 2 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio Kanon 株式会社 虎の穴ラボ 個人事業 blessing software samurai_se ↓詳しくは↓ • 水瀬いのりライブTで神戸から色んなテックカンファレンスに登壇してる人です • 3次元に嫁が1人います。2次元にはたくさんいます。 • 本業はKtor(Kotlin), Next.jsで副業がLaravel, Nest.js,Next.js • アニメと漫画と声優ラジオが好きです
3. アジェンダ 3 • SWRとは ◦ 簡単に機能を紹介 • 使い始めたきっかけ • SWRがないとき😭 • SWRがあるとき🤣 • おわりに Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
4. SWRとは 4 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio • Vercel社製 • Suspenseを簡単に 表現できる • ページネーションも 用意 • 自動再検証も提供 • Loading状態も勝手 に管理してくれる • errorハンドリング ・再試行も容易
5. 詳しく 5 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
6. 採用したきっかけ 6 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio • useEffectをバンバン書いてる状況から脱却し たい • fetch時にエラーがあればエラーページへ遷移 する共通の処理を書きたい • コンポーネントごとにローディングさせるに あたり、簡潔に記述したい • 一覧ページなどは別タブから戻ってきた際な どに最新情報で見せたい
7. 基本系 7 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio
8. 基本系 8 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 通常APIのURLとな る`key`とAPIを実行 するfetcherをとる
9. 基本系 9 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio `key`が変わらない 限り、キャッシュが 効く
10. 基本系 10 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio `key`が変われば、 Re:fetchしてくれる
11. 11 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio この特性を使うことで useEffectを使わないようにする
12. SWRがないとき 😭 12 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 子・孫に至るまでバ ケツリレー Context使っても良いけど、 記述量が増えたりレンダリン グ効率の問題だったり、トッ プレベルのコンポーネントか らpropsが過不足なく渡せて いるかの問題など
13. SWRがあるとき🤣 13 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio `id`が変わったと きだけRe:fetch useEffect 👋 同じIDなら Re:fetchしない ので再レンダリン グしない Contextを書く要 領だけど、記述 量が少ない
14. 14 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio シンプルで記述量が少ない にも関わらずやれることが多い 完全に理解し (ry
15. 15 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 他の機能もいくつか紹介
16. 自動再検証 16 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio https://swr.vercel.app/j a/docs/revalidation#re validate-on-focus
17. 無限ローディング 17 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio https://swr.vercel.a pp/ja/examples/infin ite-loading
18. mutation 18 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio useStateもなくせる ことがある
19. 19 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio Reactのデータ取得周りの十徳ナイフです みなさんも是非使ってみてください！
20. 20 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 📢 最後に宣伝だけ 🙏 オフラインLT会を 神戸で開催します！ オンラインでも毎朝もくもく会 してます！
21. 21 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 📢 最後に宣伝だけ 🙏 Kotlin以外の話も ウェルカムです！！ Reactの話もしにきて ください！
22. 22 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio 📢 最後に宣伝だけ 🙏 PHP以外の話も ウェルカムです！！ Reactの話もしにきて ください！
23. 23 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio ご清聴、あざざました
24. 24 Copyright © 2023 blessing software. All Rights Reserved. Illustrated by @amon_mikio おわりに 三ノ宮で待ってます！！