Initialize form with async values

[pgsandstrom]

Im currently in a project with certain limitations that makes it very hard for me to use react-hook-form. This setup is very common:

export function Example() {
  const data = useGetAsyncData()
  const form = useForm({
    defaultValues: data,
  })
}

But obviously it is much more complex in the real world. Many data hooks, huge forms. The problem is that defaultValues are first initialized without the data, or part of the data, while the data is loaded.

The data must be received through this hook, so I cant use react-hook-form async defaultValues.

I could add a useEffect that resets the form, but this would still result in a render where the form is initialized with the wrong values, which causes problems.

I could break out data and form into two different components, and load the form-component only when all data has loaded. But often there are many data-hooks and it would result in very much data plumbing.

So there are many solution, but they all feel quite ugly. I wish useForm could take a value like waitForData that just told it to wait with initializing the form.

Am I missing something? Would a waitForData prop be a good solution?

[BrendanC23]

Would the values option solve your problem? (docs)

The values prop will react to changes and update the form values, which is useful when your form needs to be updated by external state or server data. The values prop will overwrite the defaultValues prop, unless resetOptions: { keepDefaultValues: true } is also set for useForm.

// set default value sync
function App({ values }) {
  useForm({
    values, // will get updated when values props updates
  })
}

function App() {
  const values = useGetAsyncData();

  useForm({
    defaultValues,
    values, // will get updated once values returns
  })
}

Otherwise, having separate components seems like the easiest option. This shouldn't require too much extra plumbing.

function FormContainer() {
    const data = useGetAsyncData();

    if (!data) return null;

    return <Form data={data} />;
}

function Form({ data }) {
    const form = useForm({
        defaultValues: data,
    });
}

[pgsandstrom]

The problem when I try to use value is that there is a lag on the value updating. See this example:

import { useState } from "react"
import { Form, useForm } from "react-hook-form"

const App = () => {
  const [valueInState, setValueInState] = useState("initial")

  const form = useForm({
    values: {
      input: valueInState,
    },
  })

  const { register, control } = form

  console.log(`log`, valueInState, form.getValues())

  if (valueInState === "initial") {
    setValueInState("new")
  }

  return (
    <div>
      <div>tjena</div>
      <Form control={control}>
        <input {...register("input")} />
      </Form>
    </div>
  )
}

export default App

The log I get is:

log initial initial
log new initial
log new new

So the values lag by one render. This still makes it a mess to initialize the form in a clean way.

[BrendanC23]

I don't think there's a way to work around that. The form values update in a useEffect, which means that the update will occur after the next render.

react-hook-form/src/useForm.ts

Lines 154 to 168 in 51589c5

	React.useEffect(() => {
	if (props.values && !deepEqual(props.values, _values.current)) {
	control._reset(props.values, {
	keepFieldsRef: true,
	...control._options.resetOptions,
	});
	if (!control._options.resetOptions?.keepIsValid) {
	control._setValid();
	}
	_values.current = props.values;
	updateFormState((state) => ({ ...state }));
	} else {
	control._resetDefaultValues();
	}
	}, [control, props.values]);

In this case, I think your best option is to generate the data in a parent component and then pass it to the child form once it is defined.