useAsyncDefaultValues for when you need to wait for a prop

[hornta]

I made a handy little hook that can be used to create default values by for example waiting for a prop. In our case we fetched the object to be populated in the form outside the component.

// Usage
const promise = useAsyncDefaultValues<TheFormInputs>(() => {
  if (user) {
    return {
      name: user.name,
      email: user.email
    };
  }
}, [user]);

const form = useForm<TheFormInputs>({
  defaultValues: () => promise,
});

import { useState, useEffect, useRef, type DependencyList } from "react";

export const useAsyncDefaultValues = <T,>(
  callback: () => T | undefined,
  depList?: DependencyList
) => {
  const [callbackFunc, setCallbackFunc] = useState<() => T | undefined>(
    () => callback
  );

  useEffect(() => {
    setCallbackFunc(() => callback);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, depList);

  const resolve = useRef<(param: T) => void>();
  const [promise] = useState(
    () =>
      new Promise<T>((res) => {
        resolve.current = res;
      })
  );

  useEffect(() => {
    const value = callbackFunc();
    if (value !== undefined) {
      if (resolve.current) {
        resolve.current(value);
        resolve.current = undefined;
      }
    }
  }, [callbackFunc]);

  return promise;
};

The hook can be changed to make it a bit less noisy so it could like this: defaultValues: useAsyncDefaultValues(()=>{ ... }, [...]).

Also you can add this to the eslint config to get the same useEffect dependency rule for the hook.

"react-hooks/exhaustive-deps": [
   "warn",
   {
     additionalHooks: "useAsyncDefaultValues",
   },
],