formily VS react-hook-form

GitHub https://github.com/alibaba/formily GitHub Star 10.9k The most recent update on GitHub Five months ago Official website https://formilyjs.org/ Documentation https://formilyjs.org/guide

Enter Formily, by Alibaba which does exactly the above. With a JSON schema, forms can be generated whilst keeping control of the data model.

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.

Resource: React Hook Form Documentation

We will use NextAuth later in the article, so install that also.

React Hook Form is a lightweight and fast form validation library that integrates well with Next.js.

We'll use React with Vite, shadcn/ui (a collection of reusable components I have been wanting to try for a while), React Hook Form for form management, and Zod for schema-based form validation.

You want to do all this without writing a bunch of duplicate code and, in this case, without a third-party form library like React Hook Form.