Prepare data step in pipeline

[bicarlsen]

Is there some sort of "prepare" step in the data pipeline? e.g. Form data needs to be prepared before submission where the calculation is expensive. I can't validate the form until the data is transformed though, and the same transformation needs to occur for form submission.
prepare -> validate -> submit

Right now it seems like I would need to transform the data for both the validate and submit steps.

(I'm new to the community, so still not familiar on how exactly to look for these things. Sorry if this is a duplicate)

[LeCarbonator]

Perhaps you can perform the preparation before calling form.handleSubmit?

[bicarlsen]

@LeCarbonator How would the prepared data then get passed through the data pipeline (i.e. to the validator and handler)?

[tevinch]

You can share a memoized preparation function between the validator and submit callback. They still receive the raw form values, but the accessor returns the same prepared object for the same input:

function prepareOnce<Input, Output>(prepare: (input: Input) => Output) {
  let entry: { input: Input; output: Output } | undefined;
  return (input: Input): Output => {
    if (!entry || !Object.is(entry.input, input)) entry = { input, output: prepare(input) };
    return entry.output;
  };
}

Create it once per form instance. For example, with raw JSON text:

const preparedFor = useMemo(
  () => prepareOnce((raw: string): unknown => JSON.parse(raw)),
  [],
);

const form = useForm({
  defaultValues: { json: '{"title":"Draft"}' },
  validators: {
    onSubmit: ({ value }) => {
      try {
        return validateDocument(preparedFor(value.json));
      } catch {
        return 'Enter valid JSON';
      }
    },
  },
  onSubmit: ({ value }) => saveDocument(preparedFor(value.json)),
});

Replace parsing, validateDocument and saveDocument with your preparation, validation and submission operations. Validation runs on the prepared value; returning an error blocks submission. A changed input prepares again, while an unchanged successful input reuses its result.

This pattern requires pure, synchronous preparation and a key containing every dependency. Here the key is the complete string; if you key by an object, keep updates immutable and do not mutate the prepared result.

The runnable example checks this with TanStack Form 1.33.5: native React validation, the same prepared object in submission, actual local HTTP saves, invalid-input recovery and changed-input retries. It uses sample JSON inputs, not your application or an async preparation. The official submission guide also explains why a schema transformation alone does not carry its output into onSubmit.