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
810
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
1
Other Decks in Technology
See All in Technology
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
130
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
220
dbtとBigQuery MLで実現する リクルートの営業支援基盤のモデル開発と保守運用
recruitengineers
PRO
3
120
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
170
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.6k
事業開発におけるDify活用事例
kentarofujii
1
270
Digitization部 紹介資料
sansan33
PRO
1
5.6k
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
CoRL 2025 Survey
harukiabe
1
220
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
230
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
200
Featured
See All Featured
Building Adaptive Systems
keathley
44
2.8k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
How STYLIGHT went responsive
nonsquared
100
5.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Code Reviewing Like a Champion
maltzj
526
40k
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 リポジトリ