Introducing TanStack Form v1: Key Features and Insights

Originally published at ssojet

TanStack has released the first stable version of TanStack Form, a cross-framework form library that supports React, Vue, Angular, Solid, and Lit. This library enhances the TanStack ecosystem alongside other popular libraries such as Formik, React Hook Forms, and Final Form.

Image courtesy of TanStack

TanStack Form is designed with compatibility in mind, supporting five major front-end frameworks. This aligns with TanStack's philosophy of creating headless and framework-agnostic components. For more details on comparisons with other libraries, visit TanStack Form Comparison.

The library also supports multiple runtimes, including mobile and server-side environments like React Native and NativeScript, as well as server-rendered frameworks such as Next.js and TanStack Start. This extensive compatibility allows developers to seamlessly integrate TanStack Form into their existing tech stacks.

In terms of performance, TanStack Form utilizes signals for state management, which improve reactivity and reduce unnecessary re-renders, particularly beneficial for larger forms with complex validation rules. For validation, it adheres to the standard schema specification, allowing support for libraries like Zod and Valibot.

For comprehensive documentation, visit the TanStack Form Documentation and explore the open-source project on GitHub.

Announcing TanStack Form v1 Features

TanStack Form boasts numerous features designed for developers who prioritize type safety and validation.

Extreme type safety is a key feature; for instance, TypeScript will inform you if you attempt to use an invalid field. This is demonstrated by the following code snippet:

const form = useForm({
    defaultValues: {
        name: "",
        age: 0,
    },
});

// TypeScript will correctly tell you that `firstName` is not a valid field
<form.Field name="firstName"/>

// TypeScript will correctly tell you that `name`'s type is a `string`, not a `number`
<form.Field name="name" children={field => <NumberInput value={field.state.value}/>}/>

TanStack Form also supports field-based validation and form validation, ensuring that developers can mix and match validation strategies.

For schema validation, the library integrates with Zod and Valibot, supporting the Standard Schema out of the box.

Additionally, TanStack Form supports async validation functions, which can be incorporated like so:

<form.Field
  name="age"
  asyncDebounceMs={500}
  validators={{
    onBlurAsync: async ({ value, signal }) => {
      const currentAge = await fetchCurrentAgeOnProfile({ signal });
      return value < currentAge ? 'You can only increase the age' : undefined;
    },
  }}
/>

For developers using server-side rendering, TanStack Form simplifies server-side form validation. For more information on SSR integration, refer to the documentation on SSR with TanStack Form.

Building Modern React Apps with the TanStack Suite

The TanStack suite is a modern tech stack that empowers developers to build highly functional full-stack applications. It includes tools such as TanStack Start, TanStack Router, TanStack Query, TanStack Table, and TanStack Form.

Image courtesy of DEV Community

To set up a TanStack project, you can create a new directory and initialize it using:

mkdir tanstack-project
cd tanstack-project
npm create @tanstack/router@latest --legacy-peer-deps

After setting up your project, you can install the required dependencies for state management with TanStack Query:

npm install @tanstack/react-query @tanstack/react-query-devtools

Using the free JSONPlaceholder API, you can create a simple blog application by fetching posts and managing state effortlessly with TanStack Query.

For example, the following code snippet demonstrates how to set up a query for fetching posts:

const fetchPosts = async (): Promise<Post[]> => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

Integrating TanStack Form for user actions can be done by installing the necessary packages:

npm install @tanstack/react-form zod

You can then implement a user registration form that includes validation, utilizing the Zod library for schema validation.

Tanstack Start – Is it the Next NextJS?

TanStack Start is positioned as a full-stack JavaScript framework that aims to address the challenges faced by developers using existing frameworks like Next.js. It supports full-document SSR, streaming, server functions, and bundling as first-class features.

Image courtesy of Atomic Object

TanStack Start incorporates Vinxi, a meta-framework that allows developers to compose full-stack applications on top of Vite. It offers transparent file-based routing, which provides greater code visibility and flexibility compared to other frameworks.

For example, server functions in TanStack Start are designed to work seamlessly with traditional client-side applications.

Here’s an example of creating a server function in TanStack Start:

import { createServerFn } from '@tanstack/start';
import { z } from 'zod';

const Person = z.object({
  name: z.string(),
});

export const greet = createServerFn({ method: 'GET' })
  .validator((person: unknown) => {
    return Person.parse(person);
  })
  .handler(async (ctx) => {
    return `Hello, ${ctx.data.name}!`;
  });

TanStack Start is currently in beta but offers excellent documentation and examples on GitHub.

For enterprises looking to implement secure authentication and user management, consider solutions like SSOJet. SSOJet offers an API-first platform with features such as directory sync, SAML, OIDC, and magic link authentication, making it ideal for managing user access securely and efficiently.