参考記事

[Zenn] React 19によって状態管理はどのように変わるのか

[Zenn] React 19の新機能まるわかり

1. `useActionState` の基本

useActionStateは、React19の新しいフックで、アクションの状態を管理するために使われます。このフックは、状態の変更をトリガーし、コンポーネントの再レンダリングを引き起こすことができます。

使用例

import { useActionState } from 'react';

function MyForm() {
  const [formState, setFormState] = useActionState({ name: '', email: '' });

  const handleChange = (e) => {
    setFormState({ ...formState, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formState);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={formState.name} onChange={handleChange} />
      <input type="email" name="email" value={formState.email} onChange={handleChange} />
      <button type="submit">送信</button>
    </form>
  );
}

2. React Hook Form の基本

React Hook Formは、フォームの状態管理を簡素化するためのライブラリです。バリデーションやエラーハンドリングが容易で、パフォーマンスも良好です。

使用例

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name', { required: true })} />
      {errors.name && <span>名前は必須です</span>}
      
      <input {...register('email', { required: true })} />
      {errors.email && <span>メールは必須です</span>}
      
      <button type="submit">送信</button>
    </form>
  );
}

3. 比較

状態管理

useActionState: 状態はローカルで管理され、シンプルなフォームには適していますが、バリデーションや複雑なロジックを必要とする場合は手動で実装する必要があります。
React Hook Form: フォームの状態やバリデーションが組み込まれており、特に大規模なフォームや複雑なバリデーションが必要な場合に強力です。

バリデーション

useActionState: バリデーションを自分で実装する必要があります。エラーメッセージの管理も手動で行います。
React Hook Form: バリデーションのためのオプションが豊富で、簡単にエラーメッセージを表示できます。フォームの状態も自動で管理されます。

パフォーマンス

useActionState: 小規模なフォームでは十分なパフォーマンスを発揮しますが、状態変更が多い場合は再レンダリングが多くなる可能性があります。
React Hook Form: 最小限の再レンダリングを実現しており、大規模なフォームでもパフォーマンスが良好です。