Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React ABC Questions

Avatar for Hirotomo Yamada Hirotomo Yamada
April 18, 2025
Technology
950
0

React ABC Questions

Avatar for Hirotomo Yamada

Hirotomo Yamada

April 18, 2025

More Decks by Hirotomo Yamada

See All by Hirotomo Yamada
Release Yamada UI v2
Avatar for Hirotomo Yamada hirotomoyamada
0
610

Other Decks in Technology

See All in Technology
目的ファーストのハーネス設計 ~ハーネスの変更容易性を高めるための優先順位~
Avatar for Gota gotalab555
8
2.2k
PicoRuby as a Multi-VM Operating System
Avatar for Katsuhiko Kageyama kishima
1
180
20260423_執筆の工夫と裏側 技術書の企画から刊行まで / From the planning to the publication of technical book
Avatar for nash_efp nash_efp
3
420
コミュニティ・勉強会を作るのは目的じゃない
Avatar for uutan1108 ohmori_yusuke
0
240
マルチプロダクトの信頼性を効率良く保っていくために
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
170
扱える不確実性を増やしていく - スタートアップEMが考える「任せ方」
Avatar for kadoppe kadoppe
0
320
Keeping Ruby Running on Cygwin
Avatar for fd0 fd0
0
170
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.4k
社内エンジニア勉強会の醍醐味と苦しみ/tamadev
Avatar for Ichiro Nishiuma nishiuma
0
230
Shipping AI Agents — Lessons from Production
Avatar for vvatanabe vvatanabe
0
280
Practical TypeProf: Lessons from Analyzing Optcarrot
Avatar for Yusuke Endoh mame
0
680
AzureのIaC管理からログ調査まで、​随所に役立つ​SkillsとCustom-Instructions​ / Boosting IaC and Log Analysis with Skills
Avatar for AEON aeonpeople
0
240

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.1k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
840
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
970
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
220
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
220
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
720
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
160
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
61
43k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
140

Transcript

  1. React ABC問題

  2. Profile Produced Contributing Hirotomo Yamada Developer of Yamada UI. Designer,

    design system and UI engineer. I work for

  3. React ABC問題 A B C • 依存関係は、図の通りである。 • C内のアクション(onClick)で、Cを再レンダリングさ せずに、Bを再レンダリングさせよ。

    • 問題の解決には、Reactが提供しているフックや APIのみ使用すること。但し、メモ化 (useMemo、 memoなど)は使用しないこと。 コンポーネント ツリー

  4. React ABC問題 - ソースコード

  5. React ABC問題 - 一般的なアプローチ A B C コンポーネント ツリー ステート

    セッター ステート セッター ステート セッター • Aにステートとセッターを配置する。 • Bにステートを渡す。 • Cにセッターを渡す。

  6. React ABC問題 - 期待通りにならない A B C コンポーネント ツリー ステート

    セッター ステート セッター ステート セッター • Cのセッターを実行して、 Aのステートを更新する。 • しかし、Aのステートが変更されると子要素の Cま でも再レンダリングされてしまう。

  7. React ABC問題 - 解決するアプローチ • • • Contextを使用する。 A B

    C コンポーネント ツリー

  8. React ABC問題 - Context

  9. React ABC問題 - 解決するアプローチ • • • Contextを使用する。 useSyncExternalStoreを使用する。 A

    B C コンポーネント ツリー

  10. React ABC問題 - useSyncExternalStore

  11. React ABC問題 - 解決するアプローチ • • • Contextを使用する。 useSyncExternalStoreを使用する。 useImperativeHandleを使用する。

    A B C コンポーネント ツリー

  12. React ABC問題 - useImperativeHandle

  13. React ABC問題 - ありがとうございました https://github.com/hirotomoyamada/react-abc GitHub リポジトリ