Remix の fetcher を使い submit 時に FormData を伴ってコールバックしてくれるコンポーネントを実装する

Form コンポーネントが submit 時に FormData を引数にコールバックしてくれると、楽観的に UI を出すときや、その他の UI コンポーネントに値を引き渡したいときなどに便利そうです。

<form> の onSubmit を使っても実現できますが、fetcher を使って以下のように useEffect 内で fetcher を監視する方法でも実装できそうです。

export function NameSubmitForm(
  { onSubmit } : { onSubmit: (formData: FormData) => void }
) {
  const fetcher = useFetcher()
  useEffect(() => {
    if (fetcher.state === "submitting") {
      const data = fetcher.formData
      onSubmit({
        first: data?.get("first")?.toString(),
        last: data?.get("last")?.toString(),
      })
    }
  }, [fetcher])
  
  return (
    <fetcher.Form method="post">
      <input type="text" name="first" placeholder="First name" />
      <input type="text" name="last" placeholder="Last name" />
      <button type="submit" disabled={fetcher.state !== "idle"}>Submit</button>
    </fetcher.Form>
  )
}