【Next.js】useFormStateとuseFormStatusの違い

2024年6月17日

Next.jsのuseFormState と useFormStatusについてまとめました。
間違っていましたらご指摘ください。
どちらもフォームの状態管理に関わるフックですが、
State と Status、似ていますよね。。。

useFormState

useFormState はフォームの状態を管理するためのフックです。
フォームの各フィールドの値やエラー状態などを追跡するのに役立ちます。
一般的にはフォームの各入力フィールドの値やバリデーションエラーを管理するために使用されます。

主な機能

フォームの各フィールドの値を管理する。
フォームの各フィールドのエラーメッセージを管理する。
フォームが送信可能な状態かどうかを判定する。

コード例

'use client' // クライアントコンポーネント

import { useFormState } from 'next/forms';

function MyForm() {
  const { values, errors, handleChange, handleSubmit } = useFormState({
    initialValues: { email: '', password: '' },
    onSubmit: (values) => {
      console.log('Submitted values:', values);
    },
    validate: (values) => {
      const errors = {};
      if (!values.email) {
        errors.email = 'Email is required';
      }
      if (!values.password) {
        errors.password = 'Password is required';
      }
      return errors;
    },
  });

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
        {errors.email && <span>{errors.email}</span>}
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
        {errors.password && <span>{errors.password}</span>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

useFormStatus

useFormStatus はフォームの送信状態を管理するためのフックです。
フォームの送信中、送信成功、送信失敗などの状態を追跡するのに役立ちます。

主な機能

フォームが送信中かどうかを管理する。
フォームが送信成功したかどうかを管理する。
フォームが送信失敗したかどうかを管理する。

コード例

'use client' // クライアントコンポーネント

import { useFormStatus } from 'next/forms';

function MyForm() {
  const { isSubmitting, isSuccess, isError, handleSubmit } = useFormStatus({
    onSubmit: async (values) => {
      // 送信処理
      try {
        await submitForm(values);
      } catch (error) {
        // エラーハンドリング
      }
    },
  });

  return (
    <form onSubmit={handleSubmit}>
      {/* フォームフィールド */}
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
      {isSuccess && <div>Form submitted successfully!</div>}
      {isError && <div>There was an error submitting the form.</div>}
    </form>
  );
}