Rethinking 'withForm': A Case for Better Reusability

[callmemb]

The requirement to declare defaultValues in withForm, while simultaneously needing to pass a form containing the same data, is not a good design choice.

• It restricts the component using withForm to being usable with only one specific form definition.
• It forces developers to update the same change in two separate places.

withForm is described as the way to pass a form instance between components, with an emphasis on reusability. However, its implementation suggests it is intended merely as a way to split a form into smaller pieces, with no real reusability possible. Depending on which intention (description or implementation) is the intended one, this is either a bug or a missed opportunity.

If this is a technical problem, I would prefer to break one of TanStack’s principles and pass the data type as a generic to the component, like this:
const AwesomeFormWrapper = withForm<T>({ defaultValues: {} as T, ...

Here is an example of the usage I would like withForm to support:

import { createFormHook, createFormHookContexts } from "@tanstack/react-form";

const { fieldContext, useFieldContext, formContext } = createFormHookContexts();

function TextField({ label }: { label: string }) {
  const field = useFieldContext<string>();
  return (
    <label>
      <div>{label}</div>
      <input
        value={field.state.value}
        onChange={(e) => field.handleChange(e.target.value)}
      />
    </label>
  );
}

const { useAppForm, withForm } = createFormHook({
  fieldComponents: {
    TextField,
  },
  formComponents: {},
  fieldContext,
  formContext,
});


// Awesome way to display forms.
const AwesomeFormWrapper = withForm({
  // Here is the problem, making AwesomeFormWrapper usable for one data set. 
  //      defaultValues: {
  //        firstName: "John",
  //        lastName: "Doe",
  //      },
  // OR
  //      defaultValues: {
  //        anotherField: "field2",
  //      },
  // OR if you have generic, it would fix the problem
  //      defaultValues: {} as T
  props: {
    title: "Child Form",
  },
  render: ({ form, title, children }) => {
    /** a lot of code you want to reuse on all forms  */
    return (
      <div>
        <p>{title}</p>
        {children}
        <form.Subscribe selector={(state) => state.isSubmitting}>
          {(isSubmitting) => <button disabled={isSubmitting}>submit</button>}
        </form.Subscribe>
      </div>
    );
  },
});

export const App = () => {
  const form = useAppForm({
    defaultValues: {
      firstName: "John",
      lastName: "Doe",
    },
  });
  const form2 = useAppForm({
    defaultValues: {
      anotherField: "field2",
    },
  });

  return (
    <>
      {/** a lot of code here */}
      <AwesomeFormWrapper form={form} title={"Form 1"}>
        <form.AppField
          name="firstName"
          children={(field) => <field.TextField label="First Name" />}
        />
        <form.AppField
          name="lastName"
          children={(field) => <field.TextField label="Last Name" />}
        />
      </AwesomeFormWrapper>
      {/** a lot of code here */}
      <AwesomeFormWrapper form={form2} title={"Form 2"}>
        <form.AppField
          name="anotherField"
          children={(field) => <field.TextField label="Another field" />}
        />
      </AwesomeFormWrapper>
    </>
  );
};

[crutchcorn]

I don't find the presented case particularly compelling. You're either looking for formComponents or the PR being made to allow broader usage of withForm

In regards to a new generics passing to withForm, as you mentioned it fundamentally breaks our philosophy requirements and makes usage harder.

We will not be moving forward with this proposal

[callmemb]

Thanks for fast reply.

Would you direct me to correct way of creating Wrapper similar to one in example ?
or is it that i picked wrong way in designing my forms ?

[callmemb]

Yep, I'll drop a code example for proper usage here.

Just in case anyone else struggles with reading.

import { createFormHook, createFormHookContexts } from "@tanstack/react-form";

const { fieldContext, useFieldContext, formContext, useFormContext } =
  createFormHookContexts();

function TextField({ label }: { label: string }) {
  const field = useFieldContext<string>();
  return (
    <label>
      <div>{label}</div>
      <input
        value={field.state.value}
        onChange={(e) => field.handleChange(e.target.value)}
      />
    </label>
  );
}

function AwesomeFormWrapper({
  title,
  children,
}: React.PropsWithChildren<{ title: string }>) {
  const form = useFormContext();
  return (
    <div>
      <p>{title}</p>
      {children}
      <form.Subscribe selector={(state) => state.isSubmitting}>
        {(isSubmitting) => <button disabled={isSubmitting}>submit</button>}
      </form.Subscribe>
    </div>
  );
}

const { useAppForm } = createFormHook({
  fieldComponents: {
    TextField,
  },
  formComponents: {
    AwesomeFormWrapper
  },
  fieldContext,
  formContext,
});

export const App = () => {
  const form = useAppForm({
    defaultValues: {
      firstName: "John",
      lastName: "Doe",
    },
  });
  const form2 = useAppForm({
    defaultValues: {
      anotherField: "field2",
    },
  });

  return (
    <>
      <form.AppForm>
        <form.AwesomeFormWrapper title="Form 1">
          <form.AppField name="firstName">
            {(f) => <f.TextField label="First Name" />}
          </form.AppField>
          <form.AppField name="lastName">
            {(f) => <f.TextField label="Last Name" />}
          </form.AppField>
        </form.AwesomeFormWrapper>
      </form.AppForm>

      <form2.AppForm>
        <form2.AwesomeFormWrapper title="Form 2">
          <form2.AppField name="anotherField">
            {(f) => <f.TextField label="Another Field" />}
          </form2.AppField>
        </form2.AwesomeFormWrapper>
      </form2.AppForm>
    </>
  );
};