📚

react-hook-formでdefaultValuesを非同期でセットする方法

1 min read

react-hook-form でdefaultValuesに API レスポンスや状態管理ライブラリから非同期で渡される値を使いたい場合の tips です。

以下、recoil 使用時に直面したケースです。

BAD

コンポーネントのマウント時にはhogeIdは取得できていますが、recoil の仕様上hogehogeIdの取得を待つので一度デフォルト値が返ります。
また、そのデフォルト値が react-hook-form のdefaultValuesにセットされてしまい、想定した値がセットされません。

const hogeId = useRecoilValue(stateHogeId);
const hoge = useRecoilValue(stateHogeItem(hogeId));

const methods = useForm({
  defaultValues: {
    fuga: hoge.fuga,
  },
});

GOOD

hogeが取得できた後で react-hook-form のresetを呼ぶことでdefaultValuesに想定通りの値をセットできました。

const hogeId = useRecoilValue(stateHogeId);
const hoge = useRecoilValue(stateHogeItem(hogeId));

const defaultValues = useMemo(() => {
  return {
    fuga: hoge.fuga,
  };
}, [hoge]);

const methods = useForm({
  defaultValues,
});

useEffect(() => {
  methods.reset(defaultValues);
}, [defaultValues]);

Discussion

ログインするとコメントできます