tanstack-form-composition

TanStack Form → composition API migration

Convert a React project using @tanstack/react-form from raw useForm + prop-drilled field wrappers + an any-erased form type to the createFormHook composition API. The payoff: typed field names/values, deletion of the erased form type and every as unknown as <ErasedForm> cast, and bound field components consumed as field.TextField instead of <FieldWrapper form={form} name=… />.

This is for the React adapter. Solid/Vue/Angular have the same API shape with different hook names - the concepts below port directly.

When this applies

The codebase has most of these symptoms:

• An erased form type alias, e.g. type AnyForm = ReactFormExtendedApi<any,any,…> (12 any generics), used as a prop type and reached via form as unknown as AnyForm.
• Field components that accept form + name props and internally render <form.Field name={name}>…</form.Field>.
• Shared "section" components that receive the whole form as a prop and are reused across multiple parent forms (e.g. a settings form and an onboarding wizard).
• Helper functions that take the form and call getFieldValue/setFieldValue.

If the project does not yet use @tanstack/react-form, stop - this skill migrates an existing TanStack Form codebase; it does not introduce the library.

Method

Work in four phases. Do recon fully before editing; build the shared infra once; then migrate call sites; then delete the erased type and verify. On a large repo, migrate one simple form end-to-end first as a reference, then fan out.

Phase 0 - Recon

Confirm the version and map the blast radius. Run (adapt paths):

• Dependency: grep package.json for @tanstack/react-form (need v1+; createFormHook, createFormHookContexts, withForm are stable in v1).
• Form-creation sites: search useForm(.
• The erased type + casts: search the alias name and as unknown as.
• Existing field wrappers: the directory of components taking form/name props.
• Shared sections: components whose props include the erased form type.
• Form-consuming helpers: functions whose parameter is the erased form type.