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.
This plugin requires ESLint >= v7.0.0 and Node >= 14.
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 will have more information to act upon when you pass the correct dependencies to your effect — react-hooks/exhaustive-deps.
Determines when an effect is likely unnecessary, such as when it:
- Stores derived state
- 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
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!