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

> Master Airbnb ESLint React Hooks rules with our complete setup guide. Install and configure eslint-plugin-react-hooks for cleaner, more efficient React code.

- Repository: [Airbnb/javascript](https://github.com/airbnb/javascript)
- Tags: how-to-guide
- Published: 2026-02-24

---

**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`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/README.md):

```bash
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`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/hooks.js), the configuration simply extends [`./rules/react-hooks.js`](https://github.com/airbnb/javascript/blob/main/./rules/react-hooks.js), which activates the plugin rules. Add both entries to your [`.eslintrc.json`](https://github.com/airbnb/javascript/blob/main/.eslintrc.json):

```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`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/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:

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

```

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

```json
{
  "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:

```json
{
  "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:

```javascript
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:

```javascript
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`](https://github.com/airbnb/javascript/blob/main/packages/eslint-config-airbnb/rules/react-hooks.js) and loaded via [`packages/eslint-config-airbnb/hooks.js`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/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`](https://github.com/airbnb/javascript/blob/main/hooks.js) file provides a clean opt-in mechanism for modern React development.