How to Use Airbnb ESLint React Hooks Rules: Complete Setup Guide

To enable Airbnb's React Hooks ESLint rules, extend both "airbnb" and "airbnb/hooks" in your ESLint configuration after installing the required peer dependencies including eslint-plugin-react-hooks.

The eslint-config-airbnb package from the airbnb/javascript repository provides comprehensive linting rules for React Hooks, but these rules are not activated by default. You must explicitly include the airbnb/hooks configuration entry to enforce the React Hooks best practices defined in the source code.

Installation Requirements

Before enabling the React Hooks rules, ensure all peer dependencies are installed. The Airbnb configuration requires eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y.

The recommended installation method uses the peer-dependency installer documented in packages/eslint-config-airbnb/README.md:

npx install-peerdeps --dev eslint-config-airbnb

This command installs the correct versions of all required packages, including the critical eslint-plugin-react-hooks plugin that provides the underlying rule implementations.

Enabling the React Hooks Rules

The React Hooks rules are defined separately from the base Airbnb configuration. To activate them, you must extend both configurations in your ESLint settings.

In packages/eslint-config-airbnb/hooks.js, the configuration simply extends ./rules/react-hooks.js, which activates the plugin rules. Add both entries to your .eslintrc.json:

{
  "extends": ["airbnb", "airbnb/hooks"]
}

Important: Extending only "airbnb" will not enable Hooks validation. You must include "airbnb/hooks" to load the rules defined in packages/eslint-config-airbnb/rules/react-hooks.js.

What the Rules Enforce

The Airbnb configuration activates two specific rules from eslint-plugin-react-hooks, as defined in packages/eslint-config-airbnb/rules/react-hooks.js:

rules-of-hooks

The react-hooks/rules-of-hooks rule ensures Hooks are only called at the top level of React function components or custom Hook functions. It prevents invalid Hook calls inside loops, conditions, or nested functions.

exhaustive-deps

The react-hooks/exhaustive-deps rule checks that Hook dependency arrays contain all variables referenced inside the Hook's callback. This prevents stale closures and ensures effects run when their dependencies change.

Customizing or Disabling Rules

You can override the default React Hooks rules in your ESLint configuration's rules section. For example, to disable the exhaustive dependencies check:

{
  "extends": ["airbnb", "airbnb/hooks"],
  "rules": {
    "react-hooks/exhaustive-deps": "off"
  }
}

For project-specific overrides, use the overrides array to disable rules for specific files:

{
  "overrides": [
    {
      "files": ["src/legacy/**/*.js"],
      "rules": {
        "react-hooks/exhaustive-deps": "off"
      }
    }
  ]
}

Code Examples

Basic Configuration

The minimal ESLint configuration to activate Airbnb's React Hooks validation:

{
  "extends": ["airbnb", "airbnb/hooks"]
}

Violating the Exhaustive Deps Rule

This component fails the react-hooks/exhaustive-deps check because the id prop is referenced inside useEffect but omitted from the dependency array:

import { useEffect, useState } from 'react';

function BadComponent({ id }) {
  const [data, setData] = useState(null);

  // ESLint error: React Hook useEffect has a missing dependency: 'id'.
  useEffect(() => {
    fetch(`/api/item/${id}`).then(r => r.json()).then(setData);
  }, []); // missing 'id'
}

Running npx eslint . produces:

react-hooks/exhaustive-deps: React Hook useEffect has a missing dependency: 'id'. Either include it or remove the dependency array.

Compliant Component

The fixed version includes all dependencies in the array:

import { useEffect, useState } from 'react';

function GoodComponent({ id }) {
  const [data, setData] = useState(null);

  // No lint errors – 'id' is listed as a dependency.
  useEffect(() => {
    fetch(`/api/item/${id}`).then(r => r.json()).then(setData);
  }, [id]);
}

Summary

• Extend both configurations: Add "airbnb" and "airbnb/hooks" to your ESLint extends array to activate the React Hooks rules.
• Install peer dependencies: Use npx install-peerdeps --dev eslint-config-airbnb to install eslint-plugin-react-hooks and other required packages.
• Two rules enforced: The configuration activates rules-of-hooks (call Hooks only at top level) and exhaustive-deps (include all dependencies in arrays).
• Source locations: Rules are defined in packages/eslint-config-airbnb/rules/react-hooks.js and loaded via packages/eslint-config-airbnb/hooks.js.
• Override when necessary: Disable or modify rules in your ESLint config's rules section or use overrides for file-specific exceptions.

Frequently Asked Questions

Do I need to install eslint-plugin-react-hooks separately?

No, when you run npx install-peerdeps --dev eslint-config-airbnb, the eslint-plugin-react-hooks package is installed automatically as a peer dependency. However, you must still extend "airbnb/hooks" in your configuration to actually enable the rules.

What happens if I only extend "airbnb" without "airbnb/hooks"?

Your ESLint configuration will enforce all standard Airbnb JavaScript and React rules, but it will not validate React Hooks usage. Hooks could be called conditionally or with missing dependencies without triggering lint errors.

Can I use the Hooks rules without the rest of the Airbnb config?

While technically possible by manually configuring the rules from eslint-plugin-react-hooks, the airbnb/hooks entry point is designed to work alongside the base "airbnb" configuration. The rules in packages/eslint-config-airbnb/rules/react-hooks.js assume the presence of the base configuration's parser and environment settings.

Why does Airbnb separate the Hooks rules into a separate entry point?

The separation allows developers to adopt the base Airbnb coding standards without necessarily enforcing React Hooks constraints. This is useful for legacy codebases transitioning to Hooks or projects using class components exclusively. The hooks.js file provides a clean opt-in mechanism for modern React development.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}