React19にuseActionStateが導入されて非同期処理がシンプルになった

はじめに

React19で新たに追加されたuseActionStateは、非同期アクションの状態管理を簡素化し、エラーハンドリングや状態管理を容易にします
本記事では、useActionStateの使い方とその利便性について解説していきます

useActionState関数とは

useActionStateは非同期アクションの実行状態、成功時の状態、エラー時の状態を一元管理できるフックです
これにより、非同期アクションの実装が簡潔になり、コードの可読性が向上します

React 19の実装例: useActionStateの使用

import { useActionState } from 'react';

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      // エラーが発生した場合
      return error;
    }

     // 成功した場合
     return null;
    },
    null,
);

// 使用例
const handleSubmit = () => {
  submitAction('New Name');
};

第1引数がアクションであり、非同期関数となっています
それに伴って、返り値にisPendingが追加されています
これはuseTransactionのisPendingと同じかと思われます

返り値に含まれるsubmitActionというのは、アクションを実行する関数です
このようにステート更新に非同期処理が必要だったり、更新系の処理に紐づいたステートがある場合には、useActionStateを使うと良いでしょう

React18以前の実装方法

React18以前は、useStateとuseEffectを組み合わせて非同期処理の状態管理をしていました

React18以前の実装例

import { useState, useEffect } from 'react';

const [isPending, setIsPending] = useState(false);
const [error, setError] = useState(null);
const [name, setName] = useState('');

const handleSubmit = async (newName) => {
  setIsPending(true);
  setError(null);
  try {
    const result = await updateName(newName);

    if (result) {
      setError(result);
    } else {
      setName(newName);
    }

  } catch (e) {
    setError(e);
  } finally {
    setIsPending(false);
  }
};

useEffect(() => {
  // コンポーネントのマウント時または更新時の副作用
}, []);

（副作用とは、コンポーネントのレンダリングに直接関係しない操作のことを指すらしいです）

useActionStateの利点

• 状態管理の簡素化
  • useActionStateは、非同期アクション中の状態管理を自動化し、コードを簡潔にします
• 進行中状態の明示化
  • 非同期処理中の進行状態を明示的に扱うことで、ユーザーに対して明確なフィードバックを提供します（処理実行中、処理完了など）

まとめ

React19のuseActionStateは、非同期処理の状態管理を大幅に簡素化します
このフックを活用することで、効率的に可読性の高いコードを書くことができ、開発者の負担を軽減することができるでしょう

参考リンク