React ABC Questions

Transcript

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