この記事は、tacoms Advent Calendar 2024の19日目です!
他メンバーのAdvent Calendarはこちらからご覧ください！👇
今回は、19日目ということでReact19の新機能について学んでいきたいと思います。
2024年12月にリリースされた React 19 は、フォームの非同期処理を劇的に簡素化する新機能「Actions」を導入しました。本記事では、React 18以前とReact 19のフォーム処理を比較しながら、新しいActionsの特徴と使い方を解説します。
そもそもActionsとは？
Actions(アクション)は、フォーム送信時の非同期処理を簡単に記述するための新しい仕組みです。これまでは、フォーム送信処理にイベントハンドラーや状態管理を手動で組み込む必要がありましたが、Actionsを使うと非常に簡単に実装できます。
React 18以前のフォーム処理
React 18以前では、フォームの送信処理を実装する際に、状態管理やイベントハンドリングを手動で行う必要がありました。特に、非同期操作を伴う場合は、状態管理が複雑になりコードが煩雑になりやすいという課題がありました。
React 18のコード例
カート内の商品数を更新する処理を例に挙げます。
この処理では、数量を更新し、サーバーと連携してカートの状態をアップデートします。
function updateCart() {
const [cartItems, setCartItems] = useState("");
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(false);
const handleSubmit = async () => {
setIsPending(true);
const error = await updateCart(items);
setIsPending(false);
if (error) {
setError(error);
return;
}
redirect("/cart");
};
return (
<form onSubmit={handleSubmit}>
<input value={cartItems} onChange={(event) => setCartItems(event.target.value)} />
<button type="submit" disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</form>
);
}
React 19のフォーム処理: Actionsの登場
React 19では、従来のフォーム処理における課題を解消するために Actions が導入されました。Actionsは、フォームに直接 action プロパティを指定することで、非同期処理や状態管理を簡潔に実装できる画期的な仕組みです。
useActionState のメリット: 状態管理の簡潔化
React 19からuseActionState フックが提供され、フォームの状態管理がこれまで以上に簡単になりました。このフックを使用することで、非同期操作中のペンディング状態やエラー処理を効率的に管理できます。
useActionState は、3つの値を返します。1つ目は現在のエラー状態（error）、2つ目は非同期操作をトリガーする関数（submitAction）、そして3つ目は非同期処理中かどうかを示す状態（isPending）です。このフックを活用することで、従来の手動による状態管理やイベントハンドリングが不要になり、コードが大幅に簡素化されます。
React 19のコード例
function UpdateCart({ cartId, updateCart }) {
const [error, submitAction, isPending] = useActionState(
async (previousState, formData) => {
const error = await updateCart(cartId, formData.get("quantity"));
if (error) {
return error;
}
redirect("/cart");
return null;
},
null, // 初期値
);
return (
<form action={submitAction}>
<input type="number" name="quantity" placeholder="数量" />
<button type="submit" disabled={isPending}>Update Cart</button>
{error && <p style={{ color: "red" }}>{error}</p>}
</form>
);
}
まとめ
React 19で導入されたActionsとuseActionStateにより、フォーム送信や非同期処理の記述が劇的に簡素化されました。これにより、React 18以前では冗長になりがちだった状態管理やイベントハンドリングが直感的に記述できるようになり、開発者の負担が大幅に軽減されそうです。
React 18以前とReact 19のフォーム処理を比較してみるとこのような感じ。
| 特徴 | React 18以前 | React 19 |
|---|---|---|
| フォーム送信処理 | onSubmitで手動実装 | actionプロパティを使用 |
| 非同期状態管理 | 手動でuseStateを利用 | useActionStateで簡単に管理 |
| 入力データの取得 | FormDataを手動で作成 | 自動的にFormDataが渡される |
| コードの簡潔さ | 状態管理とエラーハンドリングで冗長になることも | 簡潔で直感的 |
React 19のこれらの新機能は、今後のReact開発においてかなり利便性が高く、多くのエンジニアにとって欠かせない選択肢になりそうです🐈フォーム処理が必要なプロジェクトでは、ぜひuseActionStateを試してみてください！
また、今回は触れませんでしたがReact19には
useActionStateやuseOptimisticなど、便利な機能がまだまだ追加されておりますのでこちらもご確認ください🐈
Discussion