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
Claude Code に プロジェクト管理やらせたみた
unson
6
4.3k
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
1
110
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
380
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
210
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
290
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
120
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
170
MobileActOsaka_250704.pdf
akaitadaaki
0
150
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
3
17k
AWS認定を取る中で感じたこと
siromi
1
190
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Facilitating Awesome Meetings
lara
54
6.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Designing for humans not robots
tammielis
253
25k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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 リポジトリ