react-hook-formのresetを使ってステートを初期化する

はじめに

ステートを初期化する際に、react-hook-formのresetを使用しました。
公式ドキュメントに使用方法が載っています。

問題

現在、学習記録アプリを作成しています。

今回実装する処理の流れとしては下記のとおりです。
登録ボタンの押下後、モーダルを閉じる→ステートの初期化を行う→再度モーダルを開くと、入力フォームが初期化された状態になっていればOK

解決方法

react-hook-formのresetを使って、学習内容と学習時間を初期化しました。
なお今回はstudyTimeをnumber型で扱っているため、初期値を0としています。

tsx

const onSubmit: SubmitHandler<IFormInputs> = async data => {
    console.log(data); 
    try {
     //データ追加(supabase)
    const addedData = await addAllRecords(data.studyContent, data.studyTime);
    const newRecord = { id: addedData.id, studyContent: data.studyContent, studyTime: data.studyTime, createDate: addedData.created_at };
    setRecords([...records, newRecord]);
    //ここでリセット
    reset({ studyContent: '' })
    reset({ studyTime: 0 })
    //モーダルを閉じる
    onClose(); 
    } catch (error) {
      console.error('Failed to submit form data:', error);
    }
  };

おわりに

「どこでresetを使うか」に注意が必要です。

例えば今回の場合だと、モーダルを閉じてからresetすると、再度モーダルを開いたときに前回入力した値が残ってしまいます。
従って、モーダルを閉じる前にresetを使ったほうが確実に初期化できるということです。

×NG例

tsx

const onSubmit: SubmitHandler<IFormInputs> = async data => {
    console.log(data); 
    try {
     //データ追加(supabase)
    const addedData = await addAllRecords(data.studyContent, data.studyTime);
    const newRecord = { id: addedData.id, studyContent: data.studyContent, studyTime: data.studyTime, createDate: addedData.created_at };
    setRecords([...records, newRecord]);
    //モーダルを閉じる
    onClose();
    //モーダルを閉じてからリセットすると、挙動がおかしくなる
    reset({ studyContent: '' })
    reset({ studyTime: 0 }) 
    } catch (error) {
      console.error('Failed to submit form data:', error);
    }
  };

参考