Form composition - withForm default values

[chrislicodes]

Hey everyone!

Let's say I get the defaultValues from an asynchronous API and want to compose a form. So I have a server component that fetches the data, passes it to a client component, and then initializes the form.

In the parent client component I have:

const form = useAppForm({ defaultValues: props.defaultValues });

As far as I understand, we should use the formOpts for default values, but in this case they are not known beforehand—I could default them to empty arrays and strings so that I can use them in the withForm component like this:

const ChildForm = withForm({
  ...formOpts,
  render: ({ form, title }) => {
    return (
      <div>
        <p>{title}</p>
        <form.AppField
          name="firstName"
          children={(field) => <field.TextField label="First Name" />}
        />
        <form.AppForm>
          <form.SubscribeButton label="Submit" />
        </form.AppForm>
      </div>
    )
  },
})

However, I don't understand how they are kept in sync. What happens if I pass the actual defaultValues to the parent but then provide default empty values to the withForm component? Is it just for type inference, or do they need to have the same default values and if yes, how would you make them accessible?

Thank you for any hints!

[chrislicodes]

Nevermind, I totally overlooked this comment:

https://tanstack.com/form/latest/docs/framework/react/guides/form-composition

// These values are only used for type-checking, and are not used at runtime
// This allows you to ...formOpts from formOptions without needing to redeclare the options