JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 15332
  • Score
    100M100P100Q160401F
  • License MIT

ESLint rule to warn against unnecessary React useEffect hooks.

Package Exports

  • eslint-plugin-react-you-might-not-need-an-effect

Readme

ESLint - React - 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.

🚀 Setup

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

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

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",
    },
  },
];

The plugin will have more information to act upon when you:

🔎 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
  • Couples parent and child state or behavior

When possible, also suggests the more idiomatic pattern.

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

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

⚠️ Limitations

This plugin aims to minimize false positives and accepts that some false negatives are inevitable — see the tests for (in)valid examples. But the ways to (mis)use an effect are practically endless; if you encounter unexpected behavior or edge cases in real-world usage, please open an issue with details about your scenario. Your feedback helps improve the plugin for everyone!

📖 Learn More