Slide 1
Slide 1 text
React ABC問題
Slide 2
Slide 2 text
Profile
Produced
Contributing
Hirotomo Yamada
Developer of Yamada UI. Designer, design system and UI engineer.
I work for
Slide 3
Slide 3 text
React ABC問題
A
B C
● 依存関係は、図の通りである。
● C内のアクション(onClick)で、Cを再レンダリングさ
せずに、Bを再レンダリングさせよ。
● 問題の解決には、Reactが提供しているフックや
APIのみ使用すること。但し、メモ化 (useMemo、
memoなど)は使用しないこと。
コンポーネント ツリー
Slide 4
Slide 4 text
React ABC問題 - ソースコード
Slide 5
Slide 5 text
React ABC問題 - 一般的なアプローチ
A
B C
コンポーネント ツリー
ステート セッター
ステート セッター
ステート セッター
● Aにステートとセッターを配置する。
● Bにステートを渡す。
● Cにセッターを渡す。
Slide 6
Slide 6 text
React ABC問題 - 期待通りにならない
A
B C
コンポーネント ツリー
ステート セッター
ステート セッター
ステート セッター
● Cのセッターを実行して、 Aのステートを更新する。
● しかし、Aのステートが変更されると子要素の Cま
でも再レンダリングされてしまう。
Slide 7
Slide 7 text
React ABC問題 - 解決するアプローチ
●
●
●
Contextを使用する。
A
B C
コンポーネント ツリー
Slide 8
Slide 8 text
React ABC問題 - Context
Slide 9
Slide 9 text
React ABC問題 - 解決するアプローチ
●
●
●
Contextを使用する。
useSyncExternalStoreを使用する。
A
B C
コンポーネント ツリー
Slide 10
Slide 10 text
React ABC問題 - useSyncExternalStore
Slide 11
Slide 11 text
React ABC問題 - 解決するアプローチ
●
●
●
Contextを使用する。
useSyncExternalStoreを使用する。
useImperativeHandleを使用する。
A
B C
コンポーネント ツリー
Slide 12
Slide 12 text
React ABC問題 - useImperativeHandle
Slide 13
Slide 13 text
React ABC問題 - ありがとうございました
https://github.com/hirotomoyamada/react-abc
GitHub リポジトリ