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
AWSで始める実践Dagster入門
kitagawaz
1
750
KotlinConf 2025_イベントレポート
sony
1
140
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
440
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
130
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
170
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
Rustから学ぶ 非同期処理の仕組み
skanehira
1
160
S3アクセス制御の設計ポイント
tommy0124
3
210
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
sagara
0
140
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
測りにくい成果を測る — BtoB SaaSにおける効果検証への挑戦 / Shirokane Kougyou vol 20
sansan_randd
2
130
Bedrock で検索エージェントを再現しようとした話
ny7760
2
150
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Building Applications with DynamoDB
mza
96
6.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
A better future with KSS
kneath
239
17k
Building an army of robots
kneath
306
46k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Thoughts on Productivity
jonyablonski
70
4.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Designing for humans not robots
tammielis
253
25k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
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 リポジトリ