https://timeedev.connpass.com/event/300375/ イベント紹介スライド

1. こんな事が出来る様に
なった最近のReact
~ver 18.2以降で利用ができるこんなHookあんな
Hook~
株式会社タイミー 西浦太基

2. 本LTで紹介する内容
・直近(v18.2~)で追加されたAPI、今回はHookに焦点 を当て、
いくつか凡例付きで紹介
・ざっくり最近のReactってこんな事が出来る様になったよ、と
いうイメージでカジュアルに紹介していきます。

3. 西浦太基
・33歳(ギリギリ平成生まれ )
・2022/8 タイミーjoin
・前職はSES企業でWebエンジニアリングを9年
経験
・北海道札幌市在住
・妻と娘と3人ぐらし
・マリオRPG switchリメイクが楽しみ
(今日(20231117)発売日)

4. Hook is 何を簡単に紹介

5. ReactにおけるHookとは
・React 16.8で導入された機能で、クラスコンポーネントなしで状態管理やライフサイクルフックを
使用出来る様にするインターフェース。
・状態を扱うロジックの再利用を容易にし、コンポーネント間の状態の共有をシンプルにしたりす
る。
・サードパーティ製のHookや、独自にカスタムHookを作成することも可能
sample : useState

6. 代表的なHook
・useState
⇨状態を持つ変数を関数コンポーネントで扱うHook
⇨Vueのdataプロパティに似ており、状態を宣言し、それを更新するための
関数を提供。

7. 代表的なHook
・useEffect
⇨副作用（データフェッチング、購読、手動でのDOMの変更など）を行う為の
フック
⇨Vueで言うwatchとmounted、updatedライフサイクルフックに相当。

8. useSyncExternalStore

9. useSyncExternalStore
概要
・外部データソースとReactコンポーネント内で扱う状態を同期させる
フック
・useSyncExternalStore登場以前は、useEffectを用いて手続き的に
同期処理を記述する必要があった。

10. useSyncExternalStore
利用例
・ウィンドウサイズの追跡

11. useSyncExternalStore
利用例
・ウィンドウサイズの追跡

12. useSyncExternalStore
利用例 : 旧来の実装
・ウィンドウサイズの追跡

13. useOptimistic

14. useOptimistic
概要
・非同期アクションが進行中にも、最適な状態を表示するために利用す
るフック。
・非同期処理の完了を待たずに、最適なUI状態を提示することができ
る。

15. useOptimistic
利用例
・コメントの即時追加機能

16. useOptimistic
利用例 : 旧来の実装
・コメントの即時追加機能

17. useDeferredValue

18. useDeferredValue
概要
・遅延させたい値を引数として受け取り、その遅延された値を返すフッ
ク
・重いレンダリング処理が、他のユーザーインタラクションをブロッ
クしないように機能実装できる。

19. useDeferredValue
利用例
・リアルタイムチャートの更新

20. useDeferredValue
利用例 : 旧来の実装
・リアルタイムチャートの更新

21. ちなみに

22. Server ComponentにおけるHookの
扱いに関して

23. Server Component
is 何を簡単に

24. Server Component
・サーバー側でレンダリングされ、データ取得やその他のサーバーサイ ドロ
ジックを処理するためのコンポーネント。クライアント側の JavaScriptバン
ドルサイズを減らすことにより、パフォーマンスを向上させたり、サーバー側で
しか利用できないmoduleを使えたりという点が利点
・対して、従来のクライアントサイドで
処理を行うコンポーネントは読んで字の
如くクライアントコンポーネントと呼ば
れます

25. Server Component
・サーバーサイドでのみ、レンダリングするという点で、(Vue, Reactの)SSRと
は異なっている

26. Server ComponentではHookを使え

27. ないです

28. Server ComponentではHookを使えない
・Hookは基本的に状態を扱うために用いますが、サーバーサイドでは状態を
永続化する必要はほとんどない。
・状態管理や副作用（ライフサイクルイベント）はクライアント側の処理とし
て、責務を分ける設計が為されているため。

29. Next.js 13へのアップグレードを控えているタイ
ミーではどうしているか

30. Hook、Server Components両方で利用出来る
再利用性が高いコードを書く様に心がけてい
る

31. 例 : ユーザー取得

32. 例 : ユーザー取得
Server Component
Client Component(Custom Hook)

33. 例 : ユーザー取得
Server Component
Client Component(Custom Hook)
userApi.ts
・ユーザー取得処理を抽
象化し、具体な処理を閉
じ込めてserver, clientい
ずれにも適応出来る様
に実装する

34. まとめ / 感想
・直近のアップデートにおいては真新しい挙動や進化は多くない印
象
・旧来の実装を、よりシンプル / イージーに行える様に最適
化する意図のAPIが多かった。
・Server Componentへのリプレイスも考慮し、カスタム
Hookを作成する場合も再利用性が高いコードを意識的に設計して
実装することが大事

35. ご清聴ありがとう
ございました！