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

0.9.3 verified Sat Apr 25 auth: no javascript

An ESLint plugin (v0.9.3, updated April 2026) that warns against unnecessary React useEffect hooks by detecting patterns where effects are synchronous or could be replaced with derived state, event handlers, or other React patterns. It encourages following the principle 'You Might Not Need an Effect' from the React docs. Unlike general React lint rules, this plugin specifically targets overuse of useEffect and provides auto-fix suggestions. Requires ESLint >=8.40.0 and Node >=14.0.0. Written in TypeScript, ships with types. The recommended and strict configs are included. Supports both flat and legacy ESLint configs.

Common errors

error ESLint configuration error: Cannot read plugin 'react-you-might-not-need-an-effect' ↓

cause Plugin not installed or not in node_modules.

fix

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

error ESLint: Error while loading rule 'react-you-might-not-need-an-effect/no-unnecessary-use-effect': Rule not found ↓

cause Incorrect rule name or missing rule registration.

fix

Ensure the plugin is added to the plugins array and the rule name matches exactly 'react-you-might-not-need-an-effect/no-unnecessary-use-effect'.

error TypeError: Cannot read properties of undefined (reading 'flat') ↓

cause Using flat config import with legacy config or wrong syntax.

fix

Use plugin.configs['flat/recommended'] instead of plugin.configs.recommended in flat configs.

Warnings

breaking Rule 'no-pass-ref-to-parent' was removed in v0.9.0. ↓

fix Remove the rule from your config; if you still need the check, consider using alternatives like forwardRef.

gotcha The plugin requires ESLint >=8.40.0. Using older ESLint versions will cause errors. ↓

fix Upgrade ESLint to >=8.40.0, or use an older version of the plugin if necessary.

gotcha Flat config users must use configs['flat/recommended'] or provide plugin object correctly. ↓

fix Use the flat config export: import plugin from 'eslint-plugin-react-you-might-not-need-an-effect'; export default [plugin.configs['flat/recommended']];

deprecated The rule 'no-unnecessary-use-effect' replaces older rule names; check your config for deprecated rule IDs. ↓

fix Use 'react-you-might-not-need-an-effect/no-unnecessary-use-effect' instead of any previous name.

Install

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

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

pnpm add eslint-plugin-react-you-might-not-need-an-effect

Imports

plugin
wrong
```
const plugin = require('eslint-plugin-react-you-might-not-need-an-effect')
```
correct
```
import plugin from 'eslint-plugin-react-you-might-not-need-an-effect'
```
Default import works in both ESM and CJS. For ESM, use the default import; for CJS, use require. The plugin also exports a flat config compatible version.

rules

wrong

import { rule } from 'eslint-plugin-react-you-might-not-need-an-effect'

correct

import { rules } from 'eslint-plugin-react-you-might-not-need-an-effect'

The correct named export is 'rules' (plural), not 'rule'. This gives access to the rule definitions dictionary.

configs
```
import { configs } from 'eslint-plugin-react-you-might-not-need-an-effect'
```
Use 'configs' to access built-in configs like 'recommended' or 'strict'. For flat config, use configs['flat/recommended'].

Quickstart

Setup ESLint config to use the plugin with the strict config or custom rules, detecting unnecessary useEffect usage.

// .eslintrc.json
{
  "plugins": ["react-you-might-not-need-an-effect"],
  "extends": ["plugin:react-you-might-not-need-an-effect/strict"],
  "rules": {
    "react-you-might-not-need-an-effect/no-unnecessary-use-effect": "warn"
  }
}

// Or with flat config (eslint.config.js)
import plugin from 'eslint-plugin-react-you-might-not-need-an-effect';
export default [
  plugin.configs['flat/recommended'],
  // or
  {
    plugins: { 'react-you-might-not-need-an-effect': plugin },
    rules: {
      'react-you-might-not-need-an-effect/no-unnecessary-use-effect': 'error',
    },
  },
];