Nested forms problem: I have one form address that has fields street and city. It can be used standalone (e.g. for updating the user’s address), or embedded into a bigger form e.g. during an onboarding.

Example of a field that aggregates multiple inputs: user.firstName, user.lastName. Normally done by only operating on statically defined fields in the form structure.

For example, if the form state is defined as:

{ firstName: string,
  lastName: string,
  address: string,
  age: number }

Well, in that case we have an aggregated field that operates on firstName and lastName: it’s very tightly coupled to that form structure and its values. Cannot override easily.

Another example: a multi-step form that might need to be edited in the future.

What if that kind of field has to be embedded in a different form? It’s impossible to do trivially.

Option 1: split into multiple forms (multi-stage). One instance of formik per step, upon submit the form state gets commited into useReducer or some kind of global state. Cons: hard to manage state of transitioning between steps, steps cannot depend on each other.

Option 2: Form groups: recursive context components that carry the current nesting level. Only works reasonably with useFormik, not very performant.

An attempt at a solution: zustand-lens-form.