Composing forms when formOptions defaultValues is dynamic

[chrisbenincasa]

I'm having trouble figuring out a clean way to compose forms spread across multiple files / components when the formOptions are "dynamic". For instance, an entity is loaded from the server and its values are used as the "defaultValues" for formOptions. In the examples of form composition, formOptions is always declared in some "shared options" file and exported. Things get complicated if some of the form options are dynamic.

A few options I've explored so far:

1. Extracting form options out to a hook, prop drilling the "initial state" to child form components, and regenerating the form options everywhere, using useTypedAppFormContext
2. Drilling the formOptions everywhere. Not pretty - there's like 12 generic types on FormOptions...
3. Contextual formOptions + useTypedAppFormContext
4. Factory function with initial values + withForm. A bit clunky. Doesn't work well if the formOptions from parent + child differ even slightly

Wondering how others have approached this problem.

[everton-dgn]

A few patterns work here, depending on your constraints:

Pattern 1: Gate rendering until data arrives (my default for edit forms)

Keep formOptions fully static and pass the real data as an override when you mount the form:

// shared/entityFormOptions.ts
export const entityFormOptions = formOptions({
  defaultValues: { name: '', description: '' },
  validators: { onChange: entitySchema },
});

// EditPage.tsx
const { data, isLoading } = useQuery({ queryKey: ['entity', id], queryFn: fetchEntity });
if (isLoading) return <Spinner />;
return <EditForm initialData={data} />;

// EditForm.tsx
function EditForm({ initialData }: { initialData: Entity }) {
  const form = useAppForm({
    ...entityFormOptions,
    defaultValues: initialData,
  });
}

Form state initializes once with real data, no reset dance, withForm composition still works because the options object is static.

Pattern 2: reset() after load (if the form has to mount before data)

const form = useAppForm({ ...entityFormOptions });
const { data } = useQuery({ queryKey: ['entity', id], queryFn: fetchEntity });

useEffect(() => {
  if (data) form.reset({ values: data });
}, [data]);

Fine, but you briefly render with empty values and then flip — touched state can get weird.

Pattern 3: Factory function (clean when child forms genuinely need parent-derived defaults)

export const createEntityFormOptions = (initialData: Partial<Entity> = {}) =>
  formOptions({
    defaultValues: { name: '', description: '', ...initialData },
    validators: { onChange: entitySchema },
  });

const { data } = useQuery({ ... });
const opts = useMemo(() => createEntityFormOptions(data), [data]);
if (!data) return null;
return <EntityForm formOptions={opts} />;

In most edit-form cases Pattern 1 has been the least surprising — the form options stay trivially sharable and you skip both the reset call and the useMemo factory.