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
React ABC Questions
Search
Hirotomo Yamada
April 18, 2025
Technology
0
690
React ABC Questions
Hirotomo Yamada
April 18, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
microCMSではじめるAIライティング
himaratsu
0
150
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
670
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
310
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
660
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
390
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1k
三視点LLMによる複数観点レビュー
mhlyc
0
230
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Balancing Empowerment & Direction
lara
1
450
Side Projects
sachag
455
42k
A designer walks into a library…
pauljervisheath
207
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Thoughts on Productivity
jonyablonski
69
4.7k
Navigating Team Friction
lara
187
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Done Done
chrislema
184
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Transcript
React ABC問題
Profile Produced Contributing Hirotomo Yamada Developer of Yamada UI. Designer,
design system and UI engineer. I work for
React ABC問題 A B C • 依存関係は、図の通りである。 • C内のアクション(onClick)で、Cを再レンダリングさ せずに、Bを再レンダリングさせよ。
• 問題の解決には、Reactが提供しているフックや APIのみ使用すること。但し、メモ化 (useMemo、 memoなど)は使用しないこと。 コンポーネント ツリー
React ABC問題 - ソースコード
React ABC問題 - 一般的なアプローチ A B C コンポーネント ツリー ステート
セッター ステート セッター ステート セッター • Aにステートとセッターを配置する。 • Bにステートを渡す。 • Cにセッターを渡す。
React ABC問題 - 期待通りにならない A B C コンポーネント ツリー ステート
セッター ステート セッター ステート セッター • Cのセッターを実行して、 Aのステートを更新する。 • しかし、Aのステートが変更されると子要素の Cま でも再レンダリングされてしまう。
React ABC問題 - 解決するアプローチ • • • Contextを使用する。 A B
C コンポーネント ツリー
React ABC問題 - Context
React ABC問題 - 解決するアプローチ • • • Contextを使用する。 useSyncExternalStoreを使用する。 A
B C コンポーネント ツリー
React ABC問題 - useSyncExternalStore
React ABC問題 - 解決するアプローチ • • • Contextを使用する。 useSyncExternalStoreを使用する。 useImperativeHandleを使用する。
A B C コンポーネント ツリー
React ABC問題 - useImperativeHandle
React ABC問題 - ありがとうございました https://github.com/hirotomoyamada/react-abc GitHub リポジトリ