Home


Performant, flexible and extensible forms with easy to use for validation.

Features

Aimed to provide API so it provides a seamless experience to developers when buidling forms.

Leverage your existing HTML markup, and start validating your forms with constraint validation API .

Performance is important and packages size matters. it is a tiny library and without any dependencies.

Minimizes the number of re-renders and faster mount, striving to provide the best user experience.

Since form state is inherently local, it can be easily adopted without other dependencies.

Reducing the amount of code that you have to write is one of the primary goals for React Hook Form. To illustrate that, let's look at a very simple form of validation among some of the most popular form validation libraries.

import React from "react";
import { Formik, Form, Field } from "formik"; function validateEmail(value) { let error; if (!value) { error = "Required"; } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) { error = "Invalid email address"; } return error;
} function validateUsername(value) { let error; if (value === "admin") { error = "Nice try!"; } return error;
} const Example = () => { const onSubmit = values => { console.log(values); }; return ( <Formik initialValues={{ username: "", email: "" }} onSubmit={onSubmit} > {({ errors, touched }) => ( <Form> <Field name="email" validate={validateEmail} /> {errors.email && touched.email && errors.email} <Field name="username" validate={validateUsername} /> {errors.username && touched.username && errors.username} <button type="submit">Submit</button> </Form> )} </Formik> );
};
import React from "react";
import useForm from "react-hook-form"; const Example = () => { const { handleSubmit, register, errors } = useForm(); const onSubmit = values => { console.log(values); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input name="email" ref={register({ required: 'Required', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: "invalid email address" } })} /> {errors.email && errors.email.message} <input name="username" ref={register({ validate: value => value === "admin" || "Nice try!" })} /> {errors.username && errors.username.message} <button type="submit">Submit</button> </form> );
};
import React from "react";
import { Provider } from "react-redux";
import { Field, reduxForm } from "redux-form";
import store from "./store"; const validate = values => { const errors = {}; if (!values.username) { errors.username = "Required"; } else if (values.username.length !== "admin") { errors.username = "Nice try!"; } if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) { errors.email = "Invalid email address"; } return errors;
}; const renderField = ({ input, label, type, meta: { touched, error } }) => ( <> <input {...input} placeholder={label} type={type} /> {touched && error && <span>{error}</span>} </>
); const Form = props => { const { handleSubmit } = props; const onSubmit = values => { console.log(values); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <Field name="email" type="email" component={renderField} label="Email" /> <Field name="username" component={renderField} label="Username" /> <button type="submit">Submit</button> </form> );
}; const FormRedux = reduxForm({ form: "syncValidation", validate })(Example); const Example = () => ( <Provider store={store}> <Example/> </Provider>
);

Do you ever wonder how many component re-renders have been triggered by the user? React Hook Form embraces uncontrolled form validation to reduce unnecessary performance impact.

Note: You can swipe through the following videos to see how they work.

Total re-renders: 30+

Total re-renders: 3

Total re-renders: 30+

The following results demonstrate: how long it took to render the components. Results are captured under 6x CPU slow down on App start with Chrome dev tools' performance tab, and code is from the section above Library Code Comparison.

  • No. of mount(s): 1
  • No. of committing change(s): 1
  • Total time: 1800ms
React Hook Form performance
  • No. of mount(s): 6
  • No. of committing change(s): 1
  • Total time: 2070ms
Formik performance
  • No. of mount(s): 17
  • No. of committing change(s): 2
  • No. of update(s): 2
  • Total time: 2380ms
Redux Form performance

Want to see more intense performance tests? Check out the result of 1000 fields within a form here.

The following form demonstrates form validation in action. Each column represents what has been captured in the custom hook. You can also change fields in the form by clicking the EDIT button.

ⓘ Change input value to see watched values.

ⓘ Validation errors will appear here.

ⓘ Touched fields will display here.

Form validation should be much simpler. React Hook Form will lead you to write less code and have better performance. Check out the get started section and learn more on the API documentation page.