フォームの入力を初期値に戻すためだけにuseStateを使わない

開発をしていてReactで作られた、とあるフォームに「リセットボタン」設置が必要になりました（リセットボタン設置の是非については横においておく）。このフォームには各入力欄に初期値が設定されていて、リセットボタンを押下すると初期値に戻るという挙動を期待しています。

これをReactで素朴に実装しようとすると、以下のようにuseStateを使って入力欄の値を更新するアプローチを取ってしまうかもしれません。

"use client";

import { useState } from "react";

export function Form() {
  const defaultName = "default name";

  const handleReset = () => {
    setName(defaultName);
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="button" onClick={handleReset}>
        reset
      </button>
    </form>
  );
}

しかしこれは罠です（？）。実はHTMLには古の時代からリセットボタンという機能があります。

<button type="reset">reset</button>
<input type="reset" />

このリセットボタン、仕様を勘違いしている人もいるのですが入力値をクリアするわけではありません。あくまでブラウザが閲覧した時に入力されている値にリセットする機能です。つまり上記のuseStateを使って初期値に書き換える必要がなく単純に type="reset" のボタンを設置するだけです。

"use client";

export function Form() {
  const defaultName = "default name";

  return (
    <form>
      <input type="text" name="name" defaultValue={defaultName} />
      <button type="reset">reset</button>
    </form>
  );
}

とてもスッキリしましたね！
まぁ、リセットボタン自体を実装しなくて済む仕様に変更できるのが一番良いです。