React 19.2の<Activity />を触ってみた

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 で本気（ガチ）で低くなったなと痛感します

React 19.2の<Activity />を触ってみた

React 19.2の<Activity />を触ってみた

amkkr

More Decks by amkkr

Other Decks in Programming

Featured

Transcript