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

Catch unnecessary React useEffect hooks to make your code simpler, faster, and safer.

Primary LanguageJavaScriptMIT LicenseMIT

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

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's recommended config to your ESLint configuration file.

Legacy config (.eslintrc)

{
  "extends": [
    "plugin:react-you-might-not-need-an-effect/legacy-recommended"
  ],
}

Flat config (eslint.config.js)

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

export default [
  reactYouMightNotNeedAnEffect.configs.recommended
];

Recommended

The plugin can provide more accurate analysis when you pass the correct dependencies to your effects — react-hooks/exhaustive-deps.

🔎 Rules

Rule Description React Docs
no-derived-state Disallow storing derived state in an effect. docs
no-chain-state-updates Disallow chaining state updates in an effect. docs
no-event-handler Disallow using state and an effect as an event handler. docs
no-adjust-state-on-prop-change Disallow adjusting state in an effect when a prop changes. docs
no-reset-all-state-on-prop-change Disallow resetting all state in an effect when a prop changes. docs
no-pass-live-state-to-parent Disallow passing live state to parents in an effect. docs
no-pass-data-to-parent Disallow passing data to parents in an effect. docs
no-initialize-state Disallow initializing state in an effect. —
no-manage-parent Disallow effects that only use props. —
no-empty-effect Disallow empty effects. —

The recommended config enables every rule as a warning.

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

💬 Feedback

The ways to (mis)use an effect in real-world code are practically endless! If you encounter unexpected behavior or see opportunities for improvement, please open an issue. Your feedback helps improve the plugin for everyone!

📖 Learn More