0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

React 19のuseActionStateを使ったForm開発

Last updated at Posted at 2024-12-04

参考記事

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: 最小限の再レンダリングを実現しており、大規模なフォームでもパフォーマンスが良好です。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?