TS defaultValues Performance

Hi, we have implemented a large form, following the example for form composition here: https://tanstack.com/form/latest/docs/framework/react/examples/large-form

we have it basically used like this

const largeDefaultValues: LargeType = {
  // a lot of different types and nesting
  // we provided some default values
  // but some still have null or empty arrays
  // some are defined to the deepest primitive type
};

export const largeFormOpts = formOptions({
  defaultValues: largeDefaultValues,
});

const usage = withForm({
  ...largeFormOpts,
  render: //...
});

const largeDefaultValues: LargeType = {
  // a lot of different types and nesting
  // we provided some default values
  // but some still have null or empty arrays
  // some are defined to the deepest primitive type
};

export const largeFormOpts = formOptions({
  defaultValues: largeDefaultValues,
});

const usage = withForm({
  ...largeFormOpts,
  render: //...
});

const largeDefaultValues: LargeType = {
  // a lot of different types and nesting
  // we provided some default values
  // but some still have null or empty arrays
  // some are defined to the deepest primitive type
};

export const largeFormOpts = formOptions({
  defaultValues: largeDefaultValues,
});

const usage = withForm({
  ...largeFormOpts,
  render: //...
});

const largeDefaultValues: LargeType = {
  // a lot of different types and nesting
  // we provided some default values
  // but some still have null or empty arrays
  // some are defined to the deepest primitive type
};

export const largeFormOpts = formOptions({
  defaultValues: largeDefaultValues,
});

const usage = withForm({
  ...largeFormOpts,
  render: //...
});

changes in the IDE became very slow up to 20-30 seconds before TS was done and could show us an error. Is this a known Issue? What should we check to make the type inference fast?

I've just added a

export const largeFormOpts = formOptions<LargeType>({
  defaultValues: largeDefaultValues,
});

export const largeFormOpts = formOptions<LargeType>({
  defaultValues: largeDefaultValues,
});

export const largeFormOpts = formOptions<LargeType>({
  defaultValues: largeDefaultValues,
});

export const largeFormOpts = formOptions<LargeType>({
  defaultValues: largeDefaultValues,
});

which gave me a TS-error because more arguments are expected but the TS errors in the IDE now popup in less than a second again, so I'm guessing it has something to do with the type inference?

React TanStack Form Large Form Example | TanStack Form Docs

An example showing how to implement Large Form in React using TanStack Form.

TS defaultValues Performance

Similar Threads

Similar Threads

Similar Threads