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
750
React ABC Questions
Hirotomo Yamada
April 18, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
320
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
1
400
エラーとアクセシビリティ
schktjm
0
390
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
150
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
450
実運用で考える PGO
kworkdev
PRO
0
130
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
150
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
6
1.8k
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
160
事業価値と Engineering
recruitengineers
PRO
8
5.4k
Language Update: Java
skrb
2
230
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
100
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Designing for Performance
lara
610
69k
What's in a price? How to price your products and services
michaelherold
246
12k
Done Done
chrislema
185
16k
Building Adaptive Systems
keathley
43
2.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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 リポジトリ