ESLint (and Oxlint) plugin to catch when You Might Not Need An Effect (and more) 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!
- Actionable fixes: Reports specific anti-patterns, with suggestions and links.
- Deep analysis: Analyzes state, props, refs, and their upstream sources.
- Dependency-aware: Considers when an effect runs to determine if its logic is actually redundant.
- Edge-case obsessed: Focuses on unusual syntax and heuristics to keep the signal-to-noise ratio high.
React's
eslint-plugin-react-hooks/set-state-in-effectrule flags synchronoussetStatecalls inside effects, helping prevent unnecessary re-renders. However, unnecessary effects go far beyond this, as I'm sure we've all seen (or written 😅).
npm install --save-dev eslint-plugin-react-you-might-not-need-an-effectyarn add -D eslint-plugin-react-you-might-not-need-an-effectAdd the plugin's recommended config to your ESLint configuration file to enable every rule as a warning.
Experimentally, use the strict config instead to enable every rule as an error.
// eslint.config.js
import reactYouMightNotNeedAnEffect from "eslint-plugin-react-you-might-not-need-an-effect";
export default [
reactYouMightNotNeedAnEffect.configs.recommended,
// or
reactYouMightNotNeedAnEffect.configs.strict,
];Use this plugin with Oxlint thanks to their JS plugin support!
// .oxlintrc.json
{
"jsPlugins": ["eslint-plugin-react-you-might-not-need-an-effect"],
"rules": {
"react-you-might-not-need-an-effect/no-derived-state": "warn",
"react-you-might-not-need-an-effect/no-chain-state-updates": "warn",
"react-you-might-not-need-an-effect/no-event-handler": "warn",
"react-you-might-not-need-an-effect/no-adjust-state-on-prop-change": "warn",
"react-you-might-not-need-an-effect/no-reset-all-state-on-prop-change": "warn",
"react-you-might-not-need-an-effect/no-pass-live-state-to-parent": "warn",
"react-you-might-not-need-an-effect/no-pass-data-to-parent": "warn",
"react-you-might-not-need-an-effect/no-initialize-state": "warn",
"react-you-might-not-need-an-effect/no-empty-effect": "warn"
},
"env": {
"browser": true
}
}Enforce these other rules in your codebase for more accurate analysis:
react-hooks/exhaustive-deps— the plugin assumes your effects receive correct dependencies.typescript-eslint/no-floating-promises— helps the plugin infer calls to asynchronous functions.
If not using a recommended config, manually set your languageOptions:
import globals from "globals";
// ...
{
globals: {
...globals.browser,
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
};See the tests for extensive (in)valid examples for each rule.
Disallow storing derived state in an effect:
function Form() {
const [firstName, setFirstName] = useState('Taylor');
const [lastName, setLastName] = useState('Swift');
const [fullName, setFullName] = useState('');
useEffect(() => {
// ❌ Avoid storing derived state. Compute "fullName" directly during render, optionally with `useMemo` if it's expensive.
setFullName(firstName + ' ' + lastName);
}, [firstName, lastName]);
}Disallow storing state derived from any state (even external) when the setter is only called once:
function Form() {
const prefix = useQuery('/prefix');
const [name, setName] = useState();
const [prefixedName, setPrefixedName] = useState();
useEffect(() => {
// ❌ Avoid storing derived state. "prefixedName" is only set here, and thus could be computed directly during render.
setPrefixedName(prefix + name)
}, [prefix, name]);
}Disallow chaining state updates in an effect:
function Game() {
const [round, setRound] = useState(1);
const [isGameOver, setIsGameOver] = useState(false);
useEffect(() => {
if (round > 10) {
// ❌ Avoid chaining state changes. When possible, update all relevant state simultaneously.
setIsGameOver(true);
}
}, [round]);
}Disallow using state and an effect as an event handler:
function ProductPage({ product, addToCart }) {
useEffect(() => {
if (product.isInCart) {
// ❌ Avoid using state and effects as an event handler. Instead, call the event handling code directly when the event occurs.
showNotification(`Added ${product.name} to the shopping cart!`);
}
}, [product]);
}Disallow adjusting state in an effect when a prop changes:
function List({ items }) {
const [isReverse, setIsReverse] = useState(false);
const [selection, setSelection] = useState(null);
useEffect(() => {
// ❌ Avoid adjusting state when a prop changes. Instead, adjust the state directly during render, or refactor your state to avoid this need entirely.
setSelection(null);
}, [items]);
}Disallow resetting all state in an effect when a prop changes:
function List({ items }) {
const [selection, setSelection] = useState(null);
useEffect(() => {
// ❌ Avoid resetting all state when a prop changes. If "items" is a key, pass it as `key` instead so React will reset the component.
setSelection(null);
}, [items]);
}Disallow passing live state to parents in an effect:
function Child({ onTextChanged }) {
const [text, setText] = useState();
useEffect(() => {
// ❌ Avoid passing live state to parents in an effect. Instead, lift the state to the parent and pass it down to the child as a prop.
onTextChanged(text);
}, [onTextChanged, text]);
}Disallow passing data to parents in an effect:
function Child({ onDataFetched }) {
const { data } = useQuery('/data')
useEffect(() => {
// ❌ Avoid passing data to parents in an effect. Instead, let the parent fetch the data itself and pass it down to the child as a prop.
onDataFetched(data)
}, [data, onDataFetched]);
}Disallow initializing state in an effect:
function Component() {
const [state, setState] = useState();
useEffect(() => {
// ❌ Avoid initializing state in an effect. Instead, initialize "state"'s `useState()` with "Hello World". For SSR hydration, prefer `useSyncExternalStore()`.
setState("Hello World");
}, []);
}Disallow empty effects:
function Component() {
// ❌ This effect is empty and could be removed.
useEffect(() => {}, []);
}The ways to (mis)use an effect in real-world code are practically endless! This plugin is not exhaustive, but aims to be. If you encounter unexpected behavior or see opportunities for improvement, please open an issue or pull request. Your feedback helps improve the plugin for everyone!