🧪 POC: support async defaultValues

[bluebill1049]

RFC: #9046

Proposal Syntax

The following syntax will support async defaultValues, so we will manage the reset form internally and update isLoading formState accordingly.

const fetchFormValues = () => {
  const values = fetch('API')

  return {
    values,
    resetOptions: {
       keepDirtyValues: true,
    }
  }
}

const { formState: { isLoading } } = useForm({
  defaultValues: fetchFormValues
})

// you can display a loading content or disable the form for better UX
if (isLoading) {
  return <div>Loading...</div>;
}

return <form />

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[github-actions]

Size Change: +89 B (0%)

Total Size: 18.1 kB

Filename	Size	Change
dist/index.cjs.js	9.02 kB	+49 B (+1%)
dist/index.umd.js	9.12 kB	+40 B (0%)

_{compressed-size-action}

[lemcoder]

Will isDirty work correctly with this approach?
In my understanding if I pass async function as defaultValues the only thing it will do is to prefill form inputs. The actual _defaultValues object will stay empty, so isDirty will be always true.

[arthurmmedeiros]

This will be really useful, is it going to be available soon by any chance?

[bluebill1049]

ng if I pass async function as defaultValues the only thing it will do is to prefill form inputs. The actual _defaultValues object will stay empty, so isDirty will be always true.

should work, will attach unit test coverage for use case as such.

[bluebill1049]

This will be really useful, is it going to be available soon by any chance?

on the project board, will get to it eventually. no ETA at the moment.

[oste]

I am wondering how this would work when using something more declarative like react-query or swr? In those cases the data would be provided more like this where data would be undefined until the async operation completes.

const { data } = useData();

useForm({
defaultValues: data?.title
});

[bluebill1049]

I am wondering how this would work when using something more declarative like react-query or swr? In those cases the data would be provided more like this where data would be undefined until the async operation completes.

const { data } = useData();

useForm({ defaultValues: data?.title });

won't work, will need to use reset at useEffect

[bluebill1049]

#9261