ESLint - You Might Not Need An Effect

ESLint plugin to catch unnecessary React useEffects to make your code easier to follow, faster to run, and less error-prone. Highly recommended for new React developers as you learn its mental model, and even experienced developers may be surprised.

🚀 Installation

This plugin requires ESLint >= v7.0.0 and Node >= 14.

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

🔧 Usage

Add the plugin to your ESLint configuration file.

Legacy config (.eslintrc)

{
  "plugins": ["react-you-might-not-need-an-effect"],
  "rules": {
    "react-you-might-not-need-an-effect/you-might-not-need-an-effect": "warn"
  }
}

Flat config (eslint.config.js)

import youMightNotNeedAnEffect from "eslint-plugin-react-you-might-not-need-an-effect";

export default [
  {
    files: ["**/*.{js,jsx}"],
    plugins: {
      "react-you-might-not-need-an-effect": youMightNotNeedAnEffect,
    },
    rules: {
      "react-you-might-not-need-an-effect/you-might-not-need-an-effect": "warn",
    },
  },
];

This plugin assumes that your effects receive correct dependencies. Thus the eslint-plugin-react-hooks/exhaustive-deps rule is also recommended.

🔎 Rule: you-might-not-need-an-effect

Determines when an effect is likely unnecessary, such as when it:

• Only uses internal state or props
• Derives or chains state updates
• Initializes state
• Resets all state when props change
• Passes data to the parent
• Manages parent behavior

When possible, also suggests the more idiomatic pattern.

While the effect may be unnecessary, we cannot reliably determine that when it:

• Uses internal state to handle events
• Uses external state
• Calls external functions

This plugin attempts to minimize false positives and accepts inevitable false negatives. But the ways to (mis)use an effect are practically endless, so please open an issue if you experience either in the real world!

📖 Learn More

• https://react.dev/reference/react/useEffect
• https://react.dev/learn/you-might-not-need-an-effect
• https://react.dev/learn/synchronizing-with-effects
• https://react.dev/learn/separating-events-from-effects
• https://react.dev/learn/lifecycle-of-reactive-effects