Related Plugin
-
eslint-plugin-react
-
react/hook-use-state
-
-
eslint-plugin-react-hooks
react-hooks/rules-of-hooksreact-hooks/exhaustive-deps
ESLint React Hooks Plugin's Rules
Rules of Hooks (error)
useHookInsideLoop
React Hook "XXX" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render.
desc: disallowed hook inside loop
```jsx
function ComponentWithHookInsideLoop() {
while (cond) {
useHookInsideLoop();
}
}
```
useConditionalHook
React Hook "XXX" is called conditionally. React Hook must be called in the exact same order in every component render. ~Did you accidentally call a React Hook after an early return?
desc: disallowed conditionally hook
```jsx
function ComponentWithConditionalHook() {
if (cond) {
useConditionalHook();
}
}
function useHook() {
if (a) return;
useState();
}
function useHook() {
try {
f();
useState();
} catch {}
}
```
classHook
React Hook "XXX" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function.
desc: disallowed hook in class
```jsx
class C {
m() {
This.useHook();
Super.useHook();
}
}
```
functionError
React Hook "XXX" is called in function "SSS" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".
desc: only use hook in Component or hook function
```jsx
function normalFunctionWithHook() {
useHookInsideNormalFunction();
}
```
topLevelError
React Hook "XXX" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.
desc: disallowed use hook at the top level
```jsx
Hook.useState();
Hook._useState();
Hook.use42();
Hook.useHook();
Hook.use_hook();
```
useHookInsideCallbackError
React Hook "XXX" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.
desc: disallowed use hook in callback or hook
```jsx
function ComponentWithHookInsideCallback() {
useEffect(() => {
useHookInsideCallback();
});
}
```
useEventError
function created with React Hook "useEvent", and can only be called from the same component. They cannot be assigned to variables or passed down
```jsx
// bad
function MyComponent({ theme }) {
const onClick = useEvent(() => {
showNotification(theme);
});
return <Child onClick={onClick}></Child>;
}
// good
const MyComponent = ({ theme }) => {
const onClick = useEvent(() => {
showNotification(theme);
});
return <Child onClick={() => onClick()}></Child>;
};
```
Exhaustive Deps (warning)
Missing dependency
warn: React Hook useCallback has a missing dependency: 'props.foo'. Either include it or remove the dependency array.
function MyComponent(props) {
useCallback(() => {
console.log(props.foo?.toString());
}, []);
}
Does nothing
warn: React Hook useMemo (and useCallback) does nothing when called with only one argument. Did you forget to pass an array of dependencies?
function MyComponent(props) {
const value = useMemo(() => { return 2*2; }); // failed
const fn = useCallback(() => { alert('foo'); }); // failed
}
No callback
warn: React Hook useEffect requires an effect callback. Did you forget to pass a callback to the hook?
function MyComponent() {
useEffect()
useLayoutEffect()
useCallback()
useMemo()
}
Unnecessary dependency
warn: React Hook useMemo has an unnecessary dependency: 'local2'. Either exclude it or remove the dependency array.
function MyComponent() {
const local1 = {};
const local2 = {};
useMemo(() => {
console.log(local1);
}, [local1, local2]);
}
// useRef doesn't cause re-render
function MyComponent({ activeTab }) {
const ref1 = useRef();
const ref2 = useRef();
useEffect(() => {
ref1.current.scrollTop = 0;
ref2.current.scrollTop = 0;
}, [ref1.current, ref2.current, activeTab]);
}
Out of scope dependency
warn: Outer scope values like 'local1' aren't valid dependencies because mutating them doesn't re-render the component.
function MyComponent() {
const local1 = someFunc();
function MyNestedComponent() {
const local2 = {};
useCallback(() => {
console.log(local1);
console.log(local2);
}, [local1]); // failed
}
}
function MyComponent() {
useCallback(() => {}, [window]); // failed
}
Duplicate dependency
warn: React Hook useEffect has a duplicate dependency: 'local'. Either omit it or remove the dependency array.
function MyComponent() {
const local = {};
useEffect(() => {
console.log(local);
console.log(local);
}, [local, local]);
}
Immutable dependency
warn: The 'foo' literal is not a valid dependency because it never changes. You can safely remove it.
function MyComponent() {
useEffect(() => {}, ['foo']);
}
Preferred array literator
warn: React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.
// incorrect
function MyComponent() {
const local = {}
const dependencies = [local];
useEffect(() => {}, dependencies);
}
// correct
function MyComponent() {
const local = {}
useEffect(() => {}, [local]);
}
Spread element dependency
warn: React Hook useEffect has a spread element in its dependency array. This means we can't statically verify whether you've passed the correct dependencies.
function MyComponent() {
const local = someFunc();
useEffect(() => {
console.log(local);
}, [local, ...dependencies]);
}
Complex expression dependency
warn: React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked.
function MyComponent(props) {
useEffect(() => {
console.log(props.items[0]);
}, [props.items, props.items[0]]);
}
Assign value inside hook
warn: Assignments to the 'value2' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect.
function MyComponent(props) {
let value;
let value2;
let value3;
let value4;
let asyncValue;
useEffect(() => {
if (value4) {
value = {};
}
value2 = 100;
value = 43;
value4 = true;
console.log(value2);
console.log(value3);
setTimeout(() => {
asyncValue = 100;
});
}, []);
}
Ref value on clean up
warn: The ref value 'myRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'myRef.current' to a variable inside the effect, and use that variable in the cleanup function.
function MyComponent() {
const myRef = useRef();
useEffect(() => {
const handleMove = () => {};
myRef.current.addEventListener('mousemove', handleMove);
return () => myRef.current.removeEventListener('mousemove', handleMove);
}, []);
return <div ref={myRef} />;
}
Always change dependency
warn: The 'handleNext' function makes the dependencies of useEffect Hook (at line 11) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'handleNext' in its own useCallback() Hook.
function MyComponent(props) {
let [, setState] = useState();
function handleNext(value) {
setState(value);
}
useEffect(() => {
return Store.subscribe(handleNext);
}, [handleNext]);
}
function Component() {
const foo = class {};
useMemo(() => foo, [foo]);
}
No dependency
warn: React Hook useEffect contains a call to 'setData'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [] as a second argument to the useEffect Hook.
function Hello() {
const [data, setData] = useState(0);
useEffect(() => {
fetchData.then(setData);
});
}
Async useEffect
warn: Effect callbacks are synchronous to prevent race conditions. Put the async function inside useEffect
function Thing() {
useEffect(async () => {}, []);
}
Prefer inline function
warn: React Hook useEffect received a function whose dependencies are unknown. Pass an inline function instead.
function MyComponent() {
const local = {};
useEffect(debounce(() => {
console.log(local);
}, delay), []);
}
Top comments (0)