こんにちは！Reactの世界へようこそ。
フロントエンドの荒波を渡り歩いてきた身として、今日は皆さんが必ず一度は頭を抱える「副作用（副作用という言葉、最初は何のことか分かりませんよね）」と、それを劇的にスマートにしてくれるReact 19の新しい相棒「`useActionState`」についてお話しします。
肩の力を抜いて、カフェでお喋りするような気持ちで読んでくださいね。
—
「副作用」って、結局なんなの？
エンジニアが言う「副作用（Side Effect）」って、実はそんなに怖いものじゃありません。
例えば、あなたが「Amazonでポチッと購入ボタンを押す」というアクションをしたとしましょう。
1. メインの仕事： 注文が確定する。
2. 副作用： 「注文完了メールが届く」「在庫の数字が減る」「画面にお礼のメッセージが出る」。
このように、「ボタンを押す」という本来の仕事以外に、「その後ろでこっそり動くおまけの仕事」のことを専門用語で「副作用」と呼びます。
Reactの世界では、この「おまけの仕事」を管理するのが意外と面倒なんです。「いつ実行するの？」「二重に動いちゃったらどうするの？」と、昔は`useEffect`というフックに泣かされてきました。
救世主 `useActionState` の登場
React 19で登場した `useActionState` は、いわば「フォーム送信の専属マネージャー」です。
これまでの苦労を例えるなら、「注文ボタンを押したあと、ちゃんと注文できたか確認して、エラーならエラーメッセージを出し、成功したら次の画面へ…」という手順を、全部自分でコードを書いて管理していました。
`useActionState` は、その一連の流れを「はい、これお任せ！」と丸投げできる頼もしい存在なんです。
—
実際にコードを書いてみよう
まずは、「名前を登録する」というシンプルなフォームを想像してください。
import { useActionState } from “react”;
// 擬似的なサーバー処理（APIを叩くイメージ）
async function submitName(previousState, formData) {
const name = formData.get(“username”);
// サーバーの返事を待つシミュレーション
await new Promise((resolve) => setTimeout(resolve, 1000));
if (name === “エラー”) {
return { status: “error”, message: “その名前は使えません！” };
}
return { status: “success”, message: `ようこそ、${name}さん！` };
}
export default function NameForm() {
// useActionStateの魔法
// state: 現在の状態, formAction: フォームに渡す関数, isPending: 通信中かどうか
const [state, formAction, isPending] = useActionState(submitName, null);
return (
);
}
このコードの「ここがすごい！」
1. `isPending` でボタンを自動無効化
「送信中」に連打されるのを防ぐために、昔は「送信中フラグ」をいちいち作っていましたが、`useActionState` が自動で教えてくれます。これが本当に楽なんです。
2. 状態管理が宣言的
「成功したとき」「エラーのとき」といった複雑な分岐を、`submitName` という一つの関数で綺麗にまとめられます。
3. 副作用の制御がシンプル
画面の切り替えやメッセージの表示が、`state` というたった一つの変数に集約されます。
—
つまずきやすいポイント：焦らなくて大丈夫
初めてこれを触ると、「`previousState` って何？」「どうして `formData` が勝手に渡ってくるの？」と混乱するかもしれません。
大丈夫です。これはReactが「フォームの面倒は私が全部見るから、あなたは中身の処理だけ考えて！」と言ってくれている仕組みなんです。
- ポイント1： `formAction` を `
- ポイント2： 通信中（Pending）のときは、ユーザーに「ちょっと待ってね」と伝えるUI（ローディング表示）を簡単に出せます。これがユーザー体験（UX）をグッと引き上げます。
まとめ：Reactはもっと楽しくなる
昔のReactを知っている人ほど、この `useActionState` のシンプルさに驚くはずです。「あんなに苦労して書いていた `useEffect` の依存配列の管理はなんだったんだ…！」と思うかもしれません。
技術は進化します。でも、大切なのは「どうやってユーザーを迷わせないか」という視点です。`useActionState` は、そのための強力な武器になります。
まずはこのコードをエディタにコピペして、ボタンを連打したり、わざとエラーを出したりして遊んでみてください。動かしているうちに、「あ、こういうことか！」と感覚的に掴める瞬間が必ず来ます。
その「なるほど！」の瞬間が、皆さんのエンジニアとしての大きなステップアップになるはずです。応援していますよ！
コメント