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-effectYarn:
yarn add -D eslint-plugin-react-you-might-not-need-an-effectConfiguration
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 will have more information to act upon when you pass the correct dependencies to your effect — react-hooks/exhaustive-deps.
🔎 Rules
Legend:
- 🟡 = Enabled as a warning in the recommended config
- 🔴 = Enabled as an error in the recommended config
- ⚪ = Not enabled by default
| Rule | Description | React Docs | Default |
|---|---|---|---|
no-derived-state |
Disallow storing derived state in an effect. | docs | 🟡 |
no-chain-state-updates |
Disallow chaining state updates in an effect. | docs | 🟡 |
no-initialize-state |
Disallow initializing state in an effect. | — | 🟡 |
no-event-handler |
Disallow using state and an effect as an event handler. | docs | 🟡 |
no-reset-all-state-when-a-prop-changes |
Disallow resetting all state in an effect when a prop changes. | docs | 🟡 |
no-pass-live-state-to-parent |
Disallow passing live state updates to parent components in an effect. | docs | 🟡 |
no-manage-parent |
Disallow effects that only use props. | — | 🟡 |
no-empty-effect |
Disallow empty effects. | — | 🟡 |
⚠️ 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!