入力Formはすぐゾンビになります

入力FormはWebアプリを作る以上、必ずと言っていいほど使われます。
専門用語でいうとinputタグのことで、下記みたいなことを言います。（今回もReactJsです）

皆さんが、SNSに投稿するときだって、文章をinputタグの中に書いています。
必要項目を入力して、追加ボタンとかを押すと、実際にみんなが見れるように更新されるのです。

後処理、意外と面倒だったりする

開発しているとあるあるなのですが、下記みたいなことありませんか？

まず、項目を入力。

追加ボタンを押下。登録が完了

成功したのに残ってる。

これでは、一見すると、「え、送信失敗してる？」と思いますよね？
じゃあクリアする必要があります。
どうするかというと、

// 今回Reactつかってます
setContext('');
setDetail('');
setPlace('');
setPlaceUrl('');

みたいな感じで、一つ一つのテキストフィールドの値に、setStateを使ってから文字を入れてやらないといけないのではないでしょうか？
「これだけなら書いてよ、、、」と思うかもしれませんが、私は省エネなので書けません。

React Hook Formだと一行。

近辺のコードはこんな感じ。

type PostInput = {
  context: string;
  detail: string;
  place: string;
  placeUrl: string;
  timeLimit: Date;
};
import { useForm, SubmitHandler } from 'react-hook-form';

const App = () => {



  const {
    register,
    handleSubmit,
    reset,
    // watch,
    formState: { errors },
  } = useForm<PostInput>();

const updateTodo = async (data) => {
    console.log('todoを登録したよ！！！');

　　// この一行だけ！！！！！！！！！！！！！
    reset();
}

んで、inputの内容をクリアするのが

    reset();

これだけです。実にいい。

一点注意ですが、これは、react hooks formの機能で、react hooks formで実装している場合のみ可能です。

細かいところだが、ユーザーからすると大事

私たちエンジニアからすると、今回の事象は「APIに内容は送ることできて更新できてるけど、フロント（見ため）で文字を消し忘れただけだｗ」みたいな軽いノリですが
何も知らないユーザーからすると、「なんかスマホ調子悪いなあ、、、買い替えるか」みたいな考えになるかもしれません。

こういったところを見逃さずに、対応していきたいですね。