form VS react-hook-form

Also, ReScript Schema supports Standard Schema, a common interface for TypeScript validation libraries. It was recently designed by the creators of Zod, Valibot, and ArkType and has already been integrated into many popular libraries. This means that you can use ReScript Schema with tRPC, TanStack Form, TanStack Router, Hono, and 19+ more at the time of writing the article.

Tanstack Form: A lightweight form management library built by the TanStack team. Furthermore, it supports numerous other libraries like Vue, Angular, Lit, and more

When it came time to introduce a form validation framework to my previous company's app, we actually settled on TanStack Form. We took one swing at it, and immediately felt that the syntax was not for us. Sorry Tanner.

Spoiler: soon it will be possible to validate fields in the form validator too! See: https://github.com/TanStack/form/pull/656

If you want to support the development of the project you can contribute to the GitHub Repo as I'm doing. You'll also find some previews such as this PR which will extend the validation feature.

Tanstack - Tanstack has evolved to an entire ecosystem consisting of the famous Tanstack (or React) Query, Tanstack Table, now also Tanstack Router and Tanstack Form. It started with Tanstack Query, which adopted Nx and Nx Cloud. Zack talked about this collab with Dominik, and we also had Dominik on our Nx live stream. Now, all the above-mentioned Tanstack libs have adopted Nx, and there's more coming.

I’ve tried lots of form libraries, but none solve the burden of easy, rapid form building as well as RJSF does.

Click to see: react-hook-form on NPM

React Hook Form (RHF) helps you create performant forms with minimal re-renders and built-in validation. It works with standard HTML form elements, enabling developers to build forms quickly without unnecessary boilerplate. Unlike controlled components, RHF uses uncontrolled components by default, which minimizes re-renders and validation overhead, resulting in faster form rendering.

That gets into a very interesting question of controlled vs. uncontrolled components.

On one hand I like controlled components because there is a single source of truth for the data (a useState()) somewhere in the app, but you are forced to re-render for each keypress. With uncontrolled components on the other hand, there's the possible anarchy of having state in React and in the actual form.

I really like this library

https://react-hook-form.com/

which has a rational answer to the problems that turn up with uncontrolled forms.

For the first time, you don't need to spend hours to read about options because there are two popular packages, react-hook-form and zod, which makes choosing so easy. The documentation is nice and you can get started so quickly.

Check out React Hook Form’s docs for advanced features like async validation.

We’ll be using Zod and drizzle-zod for schema validations in forms. Zod is already packaged on the demo application along withReact Hook Form and Zod resolver for React Hook Form. So, go ahead and install drizzle-zod. And also drizzle-seed that is Drizzle's handy package for seeding in development:

Yup provides you with a declarative way to validate form data in JavaScript apps. It has a set of features which make it a flexible and efficient choice for handling validation in React, React hook form, and other frameworks.

"Instant" can mean different things to different people.

I have an HTMX/Flask/Bootstrap app that feels instant for most requests on the LAN, except when it doesn't.

Often React apps are pretty snappy, but if you want to do complex data validation on controlled forms, where the state updates for every keystroke, it can drag you down. There are good frameworks for doing uncontrolled forms in a disciplined way

https://react-hook-form.com/

but it's another thing to add to your bundle. React is also not fast enough to do animations so you have a lot of .show/.hide (or display: none) CSS has facilities to do transitions and animations that are pretty good but I always find it a little nervewracking for a JS application to have state in React state variables and any other kind of state. Some ImGUI frameworks have components that look superficially like React components but are fast enough to animate every frame, which makes me feel like I am in control and get the animation to look exactly what I want.

Leverage Libraries: Sometimes, the complexity of forms might require more advanced solutions. Libraries like Formik and React Hook Form provide additional tools and patterns that can simplify the process.