eslint-plugin-sort-react-dependency-arrays

1.0.0 verified Sat Apr 25 auth: no javascript

ESLint plugin to enforce alphanumerically sorted React hook dependency arrays (useEffect, useLayoutEffect, etc.). Version 1.0.0 stable, requires Node >=18.18 or 20+. Differentiators: automatic fix with --fix, no external runtime dependencies beyond ESLint >=7, and focuses solely on sorting rather than comprehensive dependency checks. Lightweight alternative to eslint-plugin-react-hooks for ordering only.

Common errors

error Error: Failed to load plugin 'sort-react-dependency-arrays' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-sort-react-dependency-arrays' ↓

cause Plugin not installed or missing from node_modules.

fix

Run npm install eslint-plugin-sort-react-dependency-arrays --save-dev

error TypeError: ruleMapper is not a function ↓

cause Using an older ESLint version (<7) that does not support custom rules properly.

fix

Upgrade ESLint to >=7: npm install eslint@^7 --save-dev

error Parsing error: The keyword 'import' is reserved ↓

cause Using 'import' in .eslintrc.json (which must be valid JSON).

fix

Use 'plugins' array with string names, not import statements inside config.

error Cannot read properties of undefined (reading 'sort') ↓

cause Dependency array is dynamically constructed (e.g., using spread).

fix

Rewrite to use a static array literal for the autofix to work.

Warnings

gotcha The rule only sorts arrays, it does not validate missing dependencies. ↓

fix Combine with eslint-plugin-react-hooks/exhaustive-deps for full coverage.

gotcha Autofix may break order if dependencies have side effects or implicit ordering. ↓

fix Review autofixed output; the rule assumes alphabetical is always safe.

breaking Node versions below 18.18.0 are not supported. ↓

fix Upgrade Node to >=18.18, >=20, or >=22.

deprecated ESLint v8 is deprecated; use ESLint v9 if possible. ↓

fix Upgrade ESLint to v9 (flat config). The plugin still works with v8 but may not receive updates.

gotcha Only works with React hooks dependency arrays; does not sort other arrays. ↓

fix Use for React hooks only; for general array sorting, use other plugins.

Install

npm install eslint-plugin-sort-react-dependency-arrays

yarn add eslint-plugin-sort-react-dependency-arrays

pnpm add eslint-plugin-sort-react-dependency-arrays

Imports

rules

wrong

const rules = require('eslint-plugin-sort-react-dependency-arrays').rules

correct

import { rules } from 'eslint-plugin-sort-react-dependency-arrays'

ESM export; the package is ESM-only. CommonJS require still works for Node, but named import is preferred.

configs

wrong

import configs from 'eslint-plugin-sort-react-dependency-arrays'

correct

import { configs } from 'eslint-plugin-sort-react-dependency-arrays'

configs is a named export, not default.

plugin

wrong

const sortReactDepArrPlugin = require('eslint-plugin-sort-react-dependency-arrays')

correct

import sortReactDepArrPlugin from 'eslint-plugin-sort-react-dependency-arrays'

Default export is the plugin object. With CommonJS, require returns the default.

Quickstart

Configures the plugin and shows a sorted vs unsorted dependency array in useEffect.

// .eslintrc.json
{
  "plugins": ["sort-react-dependency-arrays"],
  "rules": {
    "sort-react-dependency-arrays/sort": "error"
  }
}

// Example React component
import { useEffect } from 'react';

function MyComponent({ flag, value }) {
  useEffect(() => {
    // ...
  }, [value, flag]); // <-- sorted correctly (alphabetically)

  useEffect(() => {
    // ...
  }, [flag, value]); // <-- will trigger lint error; use --fix to reorder
}