[react-hook-form] reset関数を使う場合は、setValueにオプションを設定した方がいい。

入力フォームを作る際に、デフォルトで値を入れときたいとか、リセットをしたいとかそういったケースは結構あると思います。

react-hook-formでは、reset関数を使うとデフォルト値を設定でき、簡単にリセットできるようになります。

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

const SampleComponent: React.FC = () => {
  const {control, handleSubmit, reset, formState} = useForm();

  useEffect(() => {
    reset(initialValue);
  }, [reset]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
      <button type="submit" disabled={!formState.isDirty}>保存</button>
      <button type="button" onClick={() => reset()}>リセット</button>
    </form>
  );
}

簡単ですね。
なお、フォームの値を変更すると、isDirtyがtrueになり、保存ボタン押せるようになります。

setValueのオプションにshoudDirtyを設定する。

かなり簡単なコードでリセットができて便利なのですが、setValueを使う場合はオプションを設定しないと、resetがどうやら、反映しないみたいです。

こちらですが、shouldDirty: trueを設定してあげると、反応するようになります。

setValue(FieldName, targetNewValue, { shouldDirty: true });