eslint-plugin-react-you-might-not-need-an-effect weekly downloads statistics

ESLint – React – You Might Not Need An Effect

ESLint (and Oxlint) plugin to catch unnecessary useEffects to make your React code easier to follow, faster to run, and less error-prone. Highly recommended for new React developers as you learn its mental model, and might surprise even experienced developers!

• Actionable fixes: Reports specific anti-patterns, with suggestions and links.
• Deep analysis: Analyzes state, props, refs, and their upstream sources.
• Dependency-aware: Considers when an effect runs to determine if its logic is actually redundant.
• Edge-case obsessed: Focuses on unusual syntax and heuristics to keep the signal-to-noise ratio high.

React's eslint-plugin-react-hooks/set-state-in-effect rule flags synchronous setState calls inside effects, helping prevent unnecessary re-renders. However, unnecessary effects go far beyond this, as I'm sure we've all seen (or written 😅).

📦 Installation

NPM

npm install --save-dev eslint-plugin-react-you-might-not-need-an-effect

Yarn

yarn add -D eslint-plugin-react-you-might-not-need-an-effect

⚙️ Configuration

Flat Config

// eslint.config.js
import reactYouMightNotNeedAnEffect from "eslint-plugin-react-you-might-not-need-an-effect";
import globals from "globals";

export default [
  // Enable every rule as a warning
  reactYouMightNotNeedAnEffect.configs.recommended,
  // Or enable every rule as an error
  reactYouMightNotNeedAnEffect.configs.strict,
  // Or enable only specific rules
  {
    plugins: {
      reactYouMightNotNeedAnEffect,
    },
    rules: {
      "reactYouMightNotNeedAnEffect/no-derived-state": "warn",
    },
    languageOptions: {
      globals: {
        ...globals.browser,
      },
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
  },
];

Legacy Config

// .eslintrc
{
  "extends": [
    // Enable every rule as a warning
    "plugin:react-you-might-not-need-an-effect/legacy-recommended",
    // Or enable every rule as an error
    "plugin:react-you-might-not-need-an-effect/legacy-strict",
  ],
  // Or enable only specific rules
  "plugins": ["react-you-might-not-need-an-effect"],
  "rules": {
    "react-you-might-not-need-an-effect/no-derived-state": "warn",
  },
  "env": {
    "browser": true,
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
    },
  },
}

Oxlint

Use this plugin with Oxlint thanks to their JS plugin support!

// .oxlintrc.json
{
  "jsPlugins": ["eslint-plugin-react-you-might-not-need-an-effect"],
  "rules": {
    "react-you-might-not-need-an-effect/no-derived-state": "warn",
    "react-you-might-not-need-an-effect/no-chain-state-updates": "warn",
    "react-you-might-not-need-an-effect/no-event-handler": "warn",
    "react-you-might-not-need-an-effect/no-adjust-state-on-prop-change": "warn",
    "react-you-might-not-need-an-effect/no-reset-all-state-on-prop-change": "warn",
    "react-you-might-not-need-an-effect/no-pass-live-state-to-parent": "warn",
    "react-you-might-not-need-an-effect/no-pass-data-to-parent": "warn",
    "react-you-might-not-need-an-effect/no-external-store-subscription": "warn",
    "react-you-might-not-need-an-effect/no-initialize-state": "warn",
  },
  "env": {
    "browser": true,
  },
}

Suggested

Enforce these other rules in your codebase for more accurate analysis:

• react-hooks/exhaustive-deps — the plugin assumes your effects receive correct dependencies.
• typescript-eslint/no-floating-promises — helps the plugin infer calls to asynchronous functions.

🔎 Rules

See the tests for extensive (in)valid examples for each rule.

no-derived-state

Disallow storing derived state in an effect:

function Form() {
  const [firstName, setFirstName] = useState("Taylor");
  const [lastName, setLastName] = useState("Swift");

  const [fullName, setFullName] = useState("");
  useEffect(() => {
    // ❌ Avoid storing derived state. Instead, compute "fullName" directly during render.
    setFullName(firstName + " " + lastName);
  }, [firstName, lastName]);
}

no-chain-state-updates

Disallow chaining state updates in an effect:

function Game() {
  const [round, setRound] = useState(1);
  const [isGameOver, setIsGameOver] = useState(false);

  useEffect(() => {
    if (round > 10) {
      // ❌ Avoid chaining state changes. When possible, update "isGameOver" along with other relevant state simultaneously.
      setIsGameOver(true);
    }
  }, [round]);
}

no-event-handler

Disallow using state and an effect as an event handler:

function Form() {
  const [dataToSubmit, setDataToSubmit] = useState();…