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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Hirotomo Yamada
April 18, 2025
Technology
0
910
React ABC Questions
Hirotomo Yamada
April 18, 2025
Tweet
Share
More Decks by Hirotomo Yamada
See All by Hirotomo Yamada
Release Yamada UI v2
hirotomoyamada
0
530
Other Decks in Technology
See All in Technology
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
rvirus0817
1
1.4k
30万人の同時アクセスに耐えたい!新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
genda
4
1.3k
20260208_第66回 コンピュータビジョン勉強会
keiichiito1978
0
130
Digitization部 紹介資料
sansan33
PRO
1
6.8k
AIエージェントを開発しよう!-AgentCore活用の勘所-
yukiogawa
0
170
usermode linux without MMU - fosdem2026 kernel devroom
thehajime
0
230
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
5
1.6k
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
maaaato
0
130
登壇駆動学習のすすめ — CfPのネタの見つけ方と書くときに意識していること
bicstone
3
110
今日から始めるAmazon Bedrock AgentCore
har1101
4
410
Webhook best practices for rock solid and resilient deployments
glaforge
1
290
OCI Database Management サービス詳細
oracle4engineer
PRO
1
7.4k
Featured
See All Featured
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
320
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.3k
A better future with KSS
kneath
240
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
54
Six Lessons from altMBA
skipperchong
29
4.1k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
50
We Have a Design System, Now What?
morganepeng
54
8k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
420
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
410
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 リポジトリ