A transparent discovery signal based on current public GitHub metadata.
Recent activity35% weight
100
Community adoption25% weight
57
Maintenance state20% weight
100
License clarity10% weight
100
Project information10% weight
100
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
README preview
ESLint – React – You Might Not Need An Effect
ESLint (and Oxlint) plugin to catch unnecessary useEffect usage to make your React code easier to follow, faster to run, and less error-prone. Highly recommended for new React developers as you learn its mental model, and might surprise even experienced developers!
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-effect rule flags synchronous setState calls inside effects, helping prevent unnecessary re-renders. However, unnecessary effects go far beyond this, as I'm sure we've all seen (or written 😅).
// eslint.config.js
import reactYouMightNotNeedAnEffect from "eslint-plugin-react-you-might-not-need-an-effect";
import globals from "globals";
export default [
// Enable every rule as a warning
reactYouMightNotNeedAnEffect.configs.recommended,
// Or enable every rule as an error
reactYouMightNotNeedAnEffect.configs.strict,
// Or enable only specific rules
{
plugins: {
reactYouMightNotNeedAnEffect,
},
rules: {
"reactYouMightNotNeedAnEffect/no-derived-state": "warn",
},
languageOptions: {
globals: {
...globals.browser,
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
},
];
Legacy Config
// .eslintrc
{
"extends": [
// Enable every rule as a warning
"plugin:react-you-might-not-need-an-effect/legacy-recommended",
// Or enable every rule as an error
"plugin:react-you-might-not-need-an-effect/legacy-strict",
],
// Or enable only specific rules
"plugins": ["react-you-might-not-need-an-effect"],
"rules": {
"react-you-might-not-need-an-effect/no-derived-state": "warn",
},
"env": {
"browser": true,
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
},
},
}
Disallow using state and an effect as an event handler:
function Form() {
const [dataToSubmit, setDataToSubmit] = useState();
useEffect(() => {
if (dataToSubmit) {
// ❌ Avoid using state and effects as an event handler. Instead, call the code that uses "dataToSubmit" directly when the event occurs.
submitData(dataToSubmit);
}
}, [dataToSubmit]);
}
Disallow using props and an effect as an event handler:
function ProductPage({ product, addToCart }) {
useEffect(() => {
if (product.isInCart) {
// ❌ Avoid using props and effects as an event handler. Instead, move the code that uses "product" to the parent component.
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 "selection" directly during render when "items" changes, 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 from a component:
function Child({ onTextChanged }) {
const [text, setText] = useState();
useEffect(() => {
// ❌ Avoid passing live state to parents in an effect. Instead, lift "text" to the parent and pass it down to "Child" as a prop.
onTextChanged(text);
}, [onTextChanged, text]);
}
Disallow passing live state to parents in an effect from a custom hook:
const useCustomHook = ({ onTextChanged }) => {
const [text, setText] = useState();
useEffect(() => {
// ❌ Avoid passing live state to parents in an effect. Instead, return "text" from "useCustomHook".
onTextChanged(text);
}, [onTextChanged, text]);
};
Disallow passing data to parents in an effect from a component:
function Child({ onDataFetched }) {
const { data } = useQuery("/data");
useEffect(() => {
// ❌ Avoid passing data to parents in an effect. Instead, fetch "useQuery" in the parent and pass it down to "Child" as a prop.
onDataFetched(data);
}, [data, onDataFetched]);
}
Disallow passing data to parents in an effect from a custom hook:
const useCustomHook = ({ onFetched }) => {
const data = useSomeAPI();
useEffect(() => {
// ❌ Avoid passing data to parents in an effect. Instead, return "useSomeAPI" from "useCustomHook".
onFetched(data);
}, [onFetched, data]);
};
Disallow subscribing to an external store in an effect:
function useOnlineStatus() {
const [isOnline, setIsOnline] = useState(true);
useEffect(() => {
function updateState() {
setIsOnline(navigator.onLine);
}
updateState();
window.addEventListener("online", updateState);
window.addEventListener("offline", updateState);
return () => {
// ❌ Avoid using an effect to subscribe to an external store. Instead, use "useSyncExternalStore" to manage "isOnline".
window.removeEventListener("online", updateState);
window.removeEventListener("offline", updateState);
};
}, []);
}
no-initialize-state
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");
}, []);
}
💬 Feedback
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!
