【React 19.2新機能】<Activity>の2つの使い方を実例でわかりやすく紹介
2025.10.6
この記事は約3分で読めます
目次
この記事の筆者：三好アキ
🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／*韓国でも出版）』著者。
▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2
React 19.2について
10月1日に、Reactバージョン19のマイナーアップデート版19.2がリリースされました。
マイナーアップデートとはいえ、新機能がいくつも追加されています。
その中でもReactビギナー 〜 中級者に関係するのが<Activity>とuseEffectEventです。
本記事では<Activity>を紹介していきます。
実際の動きを自分で確認しながら進めるとわかりやすいので、まずはReact + Viteのセットアップから始めましょう。
準備（React + Vite）
ターミナルで次のコマンドを実行してください。
npm create vite@latest質問がいくつか出てくるので、次のように答えてください。
Project name:
│ react-activity
│
◇ Select a framework:
│ React
│
◇ Select a variant:
│ JavaScript
│
◇ Use rolldown-vite (Experimental)?:
│ No
│
◇ Install with npm and start now?
│ Noインストールが完了したら、VS Codeでフォルダを開きましょう。
現時点（2025年10月6日）では、デフォルトでReactバージョン19.1がインストールされているので、これを19.2にアップデートします。
package.jsonを開き、reactとreact-domのバージョンを次のように変更しましょう。
// package.json
...
"preview": "vite preview"
},
"dependencies": {
"react": "^19.2.0", // 変更
"react-dom": "^19.2.0" // 変更
},
"devDependencies": {
...変更を保存したら、インストールを実行します。
npm install次に不要なファイルとコードを消します。
srcフォルダ内のApp.cssは削除しましょう。
次にApp.jsxとindex.css内のコードをすべて消してください。
変更を保存したら、下記コマンドでReact + Viteを起動しましょう。
npm run devこれで準備は完了です。
React 19.2の新機能<Activity>を見ていきましょう。
の2つの使い方
<Activity>は次の2つの場面で使えます。
1：データや状態を維持したい時
2：データを事前取得したい時
まずは「データや状態を維持したい時」から紹介します。
使用例①（データや状態を維持したい時）
srcフォルダ内にForm.jsxを作ります
そして下記コードを貼り付けてください。
// Form.jsx
import { useState } from "react"
const Form = () => {
const [message, setMessage] = useState("")
return (
<form>
<input type="text" onChange={e => setMessage(e.target.value)}/>
{message}
<select>
<option value="りんご">りんご</option>
<option value="ぶどう">ぶどう</option>
<option value="すいか">すいか</option>
</select>
<button type="submit">送信</button>
</form>
)
}
export default Form<input>タグと<select>タグを使った、ごく普通のコンタクトフォームです。
次はこのFormコンポーネントをAppコンポーネントで読み込み、表示させます。
App.jsxに次のコードを書いてください。
// App.jsx
import { useState } from "react"
import Form from "./Form"
const App = () => {
const [show, setShow] = useState(false)
return (
<>
<h1>トップページ</h1>
<button onClick={() => setShow(!show)}>Formを表示</button>
{show && <Form />}
</>
)
}
export default App注目して欲しいのは、Formコンポーネントの表示に条件式が使われている点です。
ボタンが押され、showstateがtrueになるとFormコンポーネントが表示されます。
変更を保存したらブラウザで動きを確認してみてください。
さて、「Formを表示」ボタンを押して、入力フォームを表示させたら、適当な文字を打ち、そして「すいか」を選びましょう。
なお、<input>タグの横にはmessagestateがあるため、入力された文字も表示されています。
次に、「Formを表示」ボタンを押してFormコンポーネントを消してください。
その後、再び「Formを表示」ボタンを押してください。次のようにFormコンポーネントが表示されます。
通常通りの動きですが、しかし入力したデータ、およびmessagestateは消えてしまっています。
これはなぜかというと、条件式で表示を切り替えるケースでは、そのHTML要素自体が削除されてしまうからです。
実際に確認してみましょう。
開発者ツールを開き、「Formを表示」ボタンを何回か押してみましょう。
▼ Form非表示時
▼ Form表示時
図の赤線が指している<form>タグが、消えたり現れたりしているのがわかります。
入力したデータやstateが消えてしまうのは、<form>タグ自体が削除されてしまうためです。
しかし、入力したデータを保持した方がユーザー体験はよくなります。
ここで使うのが<Activity>です。
App.jsxを次のように変更してください。
// App.jsx
import { useState, Activity } from "react" // 追加
import Form from "./Form"
const App = () => {
const [show, setShow] = useState(false)
return (
<>
<h1>トップページ</h1>
<button onClick={() => setShow(!show)}>Formを表示</button>
{show && <Form />} // 削除
// ▼追加
<Activity mode={show ? "visible" : "hidden"}>
<Form />
</Activity>
// ▲追加
</>
)
}
export default App変更を保存したらブラウザを開きましょう。
そして「Formを表示」ボタンを押して入力フォームを表示させたら、適当な文字を打ち、「すいか」を選びましょう。
次に「Formを表示」ボタンを押し、Formコンポーネントを消してください。
ここまでは先ほどと同じです。
さて、「Formを表示」ボタンを押してください。Formコンポーネントが表示されます。
注目して欲しいのは、入力したデータがそのまま残っていることです。
従来の条件式での表示切り替えではデータが消えてしまいましたが、<Activity>を使うとデータが維持されるのです。
なぜこのようになるのか、開発者ツールで確認してみましょう。
まずFormコンポーネント表示時は次のようになっています。<form>タグが確認できます。
次は「Formを表示」ボタンを押し、Formコンポーネントを消しましょう。
条件式を使っていた時は<form>タグ自体が消えていましたが、今回は残っています。
そしてdisplay: none !important;というCSSが追加されています。
このように<Activity>では、HTMLタグ自体を消してしまうのではなく、display: noneを使い、タグは残したまま表示だけを見えなくしているのです。
そのため、ユーザーが入力したデータやstateの状態は維持されます。
この<Activity>の機能を使うと、データを事前に取得しておくことも可能です。
次はデータの事前取得を見てみましょう。
使用例②（データを事前取得したい時）
srcフォルダ内にPost.jsxを作ってください。
このコンポーネントでは、ダミーのブログデータを取得して表示させます。
（*ここではReactバージョン19で導入されたuseを使っていますが、useの使い方はわからなくても大丈夫です。「Post.jsxではデータを取得している」と考えて、先に進んでください。）
import { use } from "react"
const postsPromise = fetch("https://jsonplaceholder.typicode.com/posts?_limit=10")
.then(response => response.json())
const Post = () => {
const data = use(postsPromise)
console.log(data)
return (
<ul>
{data?.map(post =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
)
}
export default PostこれをApp.jsxで表示させましょう。次のように変更してください（use使用時には<Suspense>も使う必要があります）。
// App.jsx
import { useState, Activity } from "react"
import Form from "./Form" // 削除
import Post from "./Post" // 追加
const App = () => {
const [show, setShow] = useState(false)
return (
<>
<h1>トップページ</h1> // ▼文言を変更
<button onClick={() => setShow(!show)}>データを表示</button>
// ▼追加
<Suspense fallback={<p>データ取得中...</p>}>
{show && <Post />}
</Suspense>
// ▲追加
// ▼削除
<Activity mode={show ? "visible" : "hidden"}>
<Form />
</Activity>
// ▲削除
</>
)
}
export default App変更を保存したらブラウザを開きましょう。
「データを表示」ボタンを押すと、「データ取得中...」と表示された後、ダミーデータが表示されます。
ここまでは従来通りの動きです。
しかし、もしここで、「データを表示」ボタンを押す前からデータを取得できていればユーザー体験はよくなります。
「データ取得中...」と表示させて、ユーザーを待たせる必要はなくなるのです。
ここで使うのが<Activity>ですが、その前に現在のコードにおけるデータ取得のタイミングを確認しておきましょう。
開発者ツールの「Console」を開き、リロード（command + R）しましょう。初期状態では次のようになっています。
そして「データを表示」ボタンを押すと、データが取得されて「Console」にも表示されます（Post.jsxの8行目にconsole.log()があります）。
「ボタンが押されてデータ取得」という従来通りの流れになっているのがわかります。
次は<Activity>を使います。
次のようにApp.jsxを書き換えてください。
// App.jsx
import { useState, Activity, Suspense } from "react"
import Post from "./Post"
const App = () => {
const [show, setShow] = useState(false)
return (
<>
<h1>トップページ</h1>
<button onClick={() => setShow(!show)}>データを表示</button>
<Suspense fallback={<p>データ取得中...</p>}>
{show && <Post />} // 削除
// ▼追加
<Activity mode={show ? "visible" : "hidden"}>
<Post/>
</Activity>
// ▲追加
</Suspense>
</>
)
}
export default App変更を保存してブラウザを開いたら、「データを表示」ボタンを押しましょう。
すると「データ取得中...」の表示はなく、すぐにデータが表示されます。
これはデータを事前取得しているためで、この方がユーザー体験ははるかによくなります。
では、どのタイミングでデータを取得しているのでしょうか。
「Console」を開いてください。そしてリロード（command + R）します。
すると、「データを表示」ボタンを押さずとも、データの取得がバックグラウンドで行われているのがわかります。
本記事ではReactバージョン19.2で導入された<Activity>を紹介してきました。
これまでのReact開発では、「データの維持」や「データの事前取得」といったユーザー体験の改善を実現するには、コードを余分に書く必要がありました。
しかし<Activity>を使うと、これを簡潔に済ませられるようになっています。
🟩 フロントエンド開発者入門ガイド【無料配布中】
最初にこれが知りたかった！
フロントエンド初心者が必ず押さえておきたい ― 『挫折しない勉強法』とその具体的ステップ、無料配布中。
（*名前不要・メールアドレスだけで受け取り可能です）
関連記事
