React Hook Form の shouldUnregister を理解する

はじめに

React Hook Form で条件によってフォームを表示・非表示にするフォームを作成したとき、非表示になっているフォームの入力途中の内容が送信されてしまうことがありました。

「本来なら非表示になったフォームの内容は送られないでほしいのに…」と思っていたところ、その問題が shouldUnregister というオプションで解決できることを知ったので、今回はそれについてまとめます。

React Hook Form の shouldUnregister を理解する

shouldUnregister とは？

shouldUnregister は、フォームフィールドがアンマウントされたときに、その入力内容を保持するか削除するかを制御するオプションです。

デフォルトでは false になっており、フォームなどがアンマウントされても入力されていた内容は保持されます。true にすると、フォームがアンマウントされた時に入力された内容は削除されます。

React Hook Form v6 まではデフォルトが true でしたが、v7 以降は false に変更されました。

設定の仕方

設定方法は大きく２種類あります。

以下の記事に掲載しているサンプルコードを参考に説明します。

一括で設定する方法

useForm の引数に指定すると、すべてのフォームフィールドに shouldUnregister が適用されます。

import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { numberPattern, schema, FormData } from './schema';

const App: React.FC = () => {
  const {
    watch,
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      email: '',
      password: '',
      confirm: '',
    },
    shouldUnregister: true // 全体に設定
  });

// 以下に続く

個別に設定する方法

register メソッドの引数で渡すことで、特定のフィールドだけ shouldUnregister を設定できます。

// 続く

<div>
  <h1>ログインフォーム</h1>
  <form onSubmit={handleSubmit(onSubmit)}>
    <div>
      <label>メールアドレス</label>
      <input
        type="email"
        {...register('email', { shouldUnregister: true })} // 個別に設定
        style={{ display: 'block' }}
      />
      {errors.email && (
        <p style={{ color: 'red' }}>{errors.email.message}</p>
      )}
    </div>

// 以下に続く

また、Controller コンポーネントの props に渡すことでも、個別に shouldUnregister を設定できます

さいごに

shouldUnregister は、フォームフィールドがアンマウントされたときに入力内容を保持するか削除するかを制御するオプションでした。

React Hook Form v7 以降ではデフォルトが false となり、内容が保持される仕様になっています。もし「非表示になった時点で値を削除したい」というケースでは、shouldUnregister を true に設定すると良いでしょう。