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.
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-effectAdd the plugin's recommended config to your ESLint configuration file.
{
"extends": [
"plugin:react-you-might-not-need-an-effect/legacy-recommended"
],
}import reactYouMightNotNeedAnEffect from "eslint-plugin-react-you-might-not-need-an-effect";
export default [
reactYouMightNotNeedAnEffect.configs.recommended
];The plugin can provide more accurate analysis when you pass the correct dependencies to your effects — react-hooks/exhaustive-deps.
| 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-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 to parents in an effect. | docs |
no-pass-data-to-parent |
Disallow passing data to parents in an effect. | docs |
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.
The ways to (mis)use an effect are practically endless — if you encounter unexpected behavior in real-world usage, please open an issue. Your feedback helps improve the plugin for everyone!