react-hook-form

About

Performant, flexible and extensible forms library for React Hooks

What detecting react-hook-form tells you about a site

react-hook-form signals performance-conscious form handling — uncontrolled inputs and minimal re-renders — chosen over Formik or hand-rolled state. Its presence usually means the app has non-trivial forms (checkout, onboarding, settings) where render performance matters.

Why the exact react-hook-form version matters

The resolver API and TypeScript types shifted across major versions, and react-hook-form is commonly paired with a schema validator. The exact version tells you which resolver contract the code expects and whether it lines up with the bundled zod/yup version.

react-hook-form in a real-world stack

When you find react-hook-form in a bundle, it rarely travels alone. @hookform/resolvers plus zod or yup for schema validation.

Quick facts

Common pairings

Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.

How Sourcemap Explorer detects react-hook-form

react-hook-form ships as v7.84.0, published 2026-08-01 and carries 0 direct dependencies, 1 peer dependency (react), 1,094 versions on the registry. Those exact numbers are the footprint Sourcemap Explorer matches when react-hook-form rides inside a deployed bundle — here is how the detection works.

We catch react-hook-form from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/react-hook-form/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.

1. 1

   Confirm the site exposes sourcemaps

   In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment — that map is where the `react-hook-form` paths live.

2. 2

   Find the package in the bundle

   Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/react-hook-form/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/react-hook-form/package.json` gives you the exact installed version.

3. 3

   Read the version directly from package.json

   Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/react-hook-form/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.

Major releases of react-hook-form

When each major version first landed. Major bumps are where breaking changes live, so this timeline is the fastest way to date the react-hook-form version a site actually ships against the ecosystem.

Recent security advisories for react-hook-form

The 1 most recent advisories affecting some versions of react-hook-form, aggregated from OSV.dev (GitHub Advisory + CVE data). A listing here doesn't mean the version a given site ships is affected — each advisory applies to a specific version range. Sourcemap Explorer reads the exact bundled version so you can check it against these ranges.

1. MAL-2026-2853· 2026-04-18

   Malicious code in react-hook-form (npm)

Recent versions

react-hook-form README

Live mirror of the GitHub README, for reference. Updated whenever the repo's default branch changes.

Get started | API | Form Builder | FAQs | Examples

Features

• Built with performance, UX and DX in mind
• Embraces native HTML form validation
• Out of the box integration with UI libraries
• Small size and no dependencies
• Supports Yup, Zod, AJV, Superstruct, Joi and others

Install

npm install react-hook-form

Quickstart

import { useForm } from 'react-hook-form';

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('firstName')} />
      <input {...register('lastName', { required: true })} />
      {errors.lastName && <p>Last name is required.</p>}
      <input {...register('age', { pattern: /\d+/ })} />
      {errors.age && <p>Please enter a number for age.</p>}
      <input type="submit" />
    </form>
  );
}

Sponsors

We’re incredibly grateful to these kind and generous sponsors for their support!

Major Sponsors

Follower24

Supporting Sponsors

Thanks.dev	Kinsta	Niche	Principal	Hygraph

Past Sponsors

Thank you to our previous sponsors for your generous support!

Backers

Thanks go to all our backers! [Become a backer].

Contributors

Thanks go to these wonderful people! [Become a contributor].

Documentation website supported and backed by Vercel

FAQ

Keep reading on Sourcemap Explorer