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 19.2の<Activity />を触ってみた
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
amkkr
October 26, 2025
Programming
0
23
React 19.2の<Activity />を触ってみた
2025.10 Mita.tsの資料です
amkkr
October 26, 2025
Tweet
Share
More Decks by amkkr
See All by amkkr
怪我をして考える情報アクセシビリティ
ama_o255
0
18
Next.jsのプロダクトでzodをReact Hook Formなしで使った話
ama_o255
0
33
CSSの歴史から選定まで
ama_o255
0
11
AIで下げたい参入障壁
ama_o255
0
20
Other Decks in Programming
See All in Programming
並行開発のためのコードレビュー
miyukiw
0
330
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
azukiazusa1
1
740
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
730
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
hisatake
0
290
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
5
770
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
mulyu
3
410
CSC307 Lecture 04
javiergs
PRO
0
660
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
200
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
ノイジーネイバー問題を解決する 公平なキューイング
occhi
0
110
CSC307 Lecture 10
javiergs
PRO
1
660
CSC307 Lecture 08
javiergs
PRO
0
670
Featured
See All Featured
Information Architects: The Missing Link in Design Systems
soysaucechin
0
780
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
1
1.3k
Ethics towards AI in product and experience design
skipperchong
2
200
The Limits of Empathy - UXLibs8
cassininazir
1
220
Building AI with AI
inesmontani
PRO
1
700
The SEO Collaboration Effect
kristinabergwall1
0
350
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
67
Done Done
chrislema
186
16k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
450
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
Test your architecture with Archunit
thirion
1
2.2k
A Soul's Torment
seathinner
5
2.3k
Transcript
React 19.2 の<Activity /> を触 ってみた Mita.ts
⾃⼰紹介 名前:amkkr Instagram 分析ツーû~開発にフûサイクûエンジニアxしv参加 前職wEdTech ~ベンチャーw、社内専⽤~在庫や顧客管理~台帳Web アプ úを開発しvいました X: @ama_O255
<Activity/> とは何か React 19.2 で導入された新機能で、コンポーネントの状態管理を簡素化しま す。従来のProps Drilling と比較して、より少ないコード量で入力状態を保持で きることが特徴です。 公式ドキュメント:
react.dev/reference/react/Activity
リリース時に巻き起こった議論 タブとかモーダルの状態を保ったまま切り替えや開閉ができるけど.. 今更? 条件付きレンダリングでよくね?
条件付きレンダリングだとこれまで コンポーネントが完全にアンマウントされる フォームの入力内容が消える スクロール位置がリセットされる データをrefetch する必要がある
実験してみる こんなページでお試し。すべ てのタブに - カウンター - テキストフィールド を持たせてます。 環境は React
Vite Deno の構成です。
実装⽐較: コード量の違い 実際~コーù²⽐較検証wたúポジøú²公開wvいまy2 従来~実装 タö²切º替えv²⼊⼒²保持uせようxy»xstate 管理 周ºww³yくzº|ち2 ÷ロジェクø~変数管理~ûーûや1⼊⼒²yう使う{{ よっvProps Drilling
問題|発⽣wたºwv1w³yu|あ »2 AI {任せvs¼|z出wu¼た↓ PropsDrillingMode.tsx Activity 利⽤ Activity API ²使⽤wた実装 タötx{state x{閉x込±v保持y»sx²2便利2 ActivityMode.tsx úポジøú: https://github.com/amkkr/deno-react-vite
Activity API の利点 ⼊⼒保持したい時{1 記述量の削減 従来⽐w1コード量を減¹すこ x|w}»予感2 開発体験の向上 シンプルz実装{¸º1保守性 x可読性|向上します2
重要z注意点 パフォーマンスへの影響 アンマウント後も状態が破棄されないという特性があºます2こ ¼{よº1ñòリ使⽤量が増加し1アプリケーションが重くz» 可能性があºます2 状態~永続化 コンýーネントがアンþ¶ントさ¼v²1⼊⼒状態保持さ¼続けま y2 ñòリ管理{注意 ⼤規模zアプリケー·ョンw1ñòリリーク~リ¹ク²考慮wた設
計が必要wy2 適切z使⽤場⾯²⾒極±» yべv~ケー¹w有効wあºませ³2プロ¸·クト~要件{応xv 判断wまwょう2
ご清聴ありがとうございました 新しいものを触るコストがLLM で本気(ガチ)で低くなったなと痛感します