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
インフラ寄りSREの生存戦略
sansantech
PRO
1
380
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
220
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
2
17k
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
120
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.8k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
GraphQLとの向き合い方2022年版
quramy
49
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Become a Pro
speakerdeck
PRO
29
5.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Gamification - CAS2011
davidbonilla
81
5.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
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 リポジトリ