Using initialValues with nested object causes infinite re-renders about react-final-form-hooks HOT 4 OPEN

For future visitors to this issue, you can also use useMemo to make sure the object reference stays the same

const initialValues = useMemo(() => ({
  name: {
      firstName: 'Clark',
      lastName: 'Kent',
    }
}), [])
const Test = () => {
  const { form, handleSubmit, values, pristine, submitting } = useForm({
    initialValues
  });
}

from react-final-form-hooks.

I think that we could initialize value after react rendering, that means should set initial value on useEffect, in this case, a temporary solution is:

useEffect(() => {
  form.initialize({
    name: {
      firstName: 'Clark',
      lastName: 'Kent',
    }
  });
}, []);

from react-final-form-hooks.

Thanks @l1nyanm1ng

from react-final-form-hooks.

Thanks @Jephuff for the work around.

from react-final-form-hooks.