SWRで取得したdataをReact Hook FormのdefaultValuesにセットする

SWRで取得したdataを、React Hook Form（以降はRHF）のdefaultValuesにセットしたいことがあると思います。
以下のような感じです。

"use client";

import { useForm } from "react-hook-form";
import useSWR from "swr";

export default function Home() {
  const fetcher = () =>
    fetch("/user/1").then((res) => res.json());
  const { data, isLoading } = useSWR(
    "/user/1",
    fetcher
  );
  const { register } = useForm({
    defaultValues: {
      name: data?.name,
    },
  });

  return <input {...register("name")} />;
}

しかし、このやり方だとdefaultValuesにうまくセットされません。
なぜなら、dataはフェッチしたデータが入るまではundefinedとなっているため、defaultValuesにはundefinedがセットされてしまうためです。
データがフェッチされても、defaultValuesは上書きされないんですね。

この現象は、useEffectを使用すれば回避できます。

"use client";

import { useEffect } from "react";
import { useForm } from "react-hook-form";
import useSWR from "swr";

export default function Home() {
  const fetcher = () =>
    fetch("/user/1").then((res) => res.json());
  const { data, isLoading } = useSWR(
    "/user/1",
    fetcher
  );
  const { register, reset } = useForm();

  useEffect(() => {
    if (isLoading) return;
    reset({ name: data?.name });
  }, [data, isLoading, reset]);

  return <input {...register("name")} />;
}

useEffectの依存配列にSWRのdataを指定しています。
SWRでデータがフェッチできたタイミングでuseEffectが実行され、RHKのresetで初期値をセットされます。

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村