eslint-plugin-react-hook-form

0.3.1 verified Sat Apr 25 auth: no javascript

ESLint plugin for react-hook-form that enforces best practices and catches common mistakes during development. Current stable version is 0.3.1, with irregular release cadence (latest release May 2023). Provides rules like 'destructuring-formstate', 'no-access-control', 'no-nested-object-setvalue', and 'no-use-watch'. Differentiators: specifically targets react-hook-form API misuse (e.g., formState destructuring, control property access, nested objects in setValue, watch usage). Integrates via plugins and extends in ESLint config.

Common errors

error Error: Failed to load plugin 'react-hook-form' declared in '...' ↓

cause Plugin not installed or incorrectly referenced in ESLint config.

fix

Run npm install eslint-plugin-react-hook-form --save-dev and ensure plugins array contains 'react-hook-form' (not 'eslint-plugin-react-hook-form').

error Definition for rule 'react-hook-form/destructuring-formstate' was not found ↓

cause Rule name misspelled or plugin not loaded properly.

fix

Check that plugin is listed in plugins array and rule name is correct. Verify plugin version supports the rule.

error Cannot find module 'eslint-plugin-react-hook-form' ↓

cause npm package not installed in the project.

fix

Run npm install eslint-plugin-react-hook-form --save-dev.

Warnings

gotcha Rules only apply to files using react-hook-form; the plugin does not detect if react-hook-form is installed. ↓

fix Ensure ESLint is run on files that import react-hook-form and that the plugin is included in the ESLint configuration.

deprecated Rule 'no-access-control' may report false positives if control is used legitimately (e.g., custom register). ↓

fix Disable the rule or add inline exceptions using eslint-disable comments.

gotcha The 'no-nested-object-setvalue' rule only flags nested objects in the second argument of setValue, but does not catch deep nesting in arrays. ↓

fix Manually review calls to setValue with array arguments.

gotcha The recommended config sets 'destructuring-formstate' and 'no-nested-object-setvalue' as errors, 'no-access-control' as warning, and does not include 'no-use-watch'. ↓

fix Override rules in your config if different severity is desired.

Install

npm install eslint-plugin-react-hook-form

yarn add eslint-plugin-react-hook-form

pnpm add eslint-plugin-react-hook-form

Imports

configs.recommended
wrong
```
extends: ['eslint-plugin-react-hook-form/recommended']
```
correct
```
extends: ['plugin:react-hook-form/recommended']
```
In ESLint config, do not include 'eslint-plugin-' prefix; use 'plugin:react-hook-form/recommended'.
rules
wrong
```
rules: {'react-hook-form/destructuring-formstate': 2}
```
correct
```
rules: {'react-hook-form/destructuring-formstate': 'error'}
```
Use string severity ('error','warn','off') rather than numeric values. Prefix rule name with 'react-hook-form/'.
Plugin import (ESLint config)
wrong
```
plugins: ['eslint-plugin-react-hook-form']
```
correct
```
plugins: ['react-hook-form']
```
ESLint automatically strips 'eslint-plugin-' prefix when specifying plugins.

Quickstart

Shows how to configure the ESLint plugin in .eslintrc.json, either by specifying individual rules or extending the recommended config.

// .eslintrc.json
{
  "plugins": ["react-hook-form"],
  "rules": {
    "react-hook-form/destructuring-formstate": "error",
    "react-hook-form/no-access-control": "warn",
    "react-hook-form/no-nested-object-setvalue": "error",
    "react-hook-form/no-use-watch": "warn"
  }
}

// Alternatively, use recommended config:
{
  "extends": "plugin:react-hook-form/recommended"
}