Lint Rules

useExhaustiveDependencies (since v10.0.0)

Enforce all dependencies are correctly specified.

Examples

Invalid

let a = 1;
useEffect(() => {
    console.log(a);
})
nursery/useExhaustiveDependencies.js:2:1 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━

   This hook do not specify all of its dependencies.
  
    1 │ let a = 1;
  > 2 │ useEffect(() => {
   ^^^^^^^^^
    3 │     console.log(a);
    4 │ })
  
   This dependency is not specified in the hook dependency list.
  
    1 │ let a = 1;
    2 │ useEffect(() => {
  > 3 │     console.log(a);
                   ^
    4 │ })
    5 │ 
  
let b = 1;
useEffect(() => {
}, [b])
nursery/useExhaustiveDependencies.js:2:1 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━

   This hook specifies more dependencies than necessary.
  
    1 │ let b = 1;
  > 2 │ useEffect(() => {
   ^^^^^^^^^
    3 │ }, [b])
    4 │ 
  
   This dependency can be removed from the list.
  
    1 │ let b = 1;
    2 │ useEffect(() => {
  > 3 │ }, [b])
       ^
    4 │ 
  
const [name, setName] = useState();
useEffect(() => {
    console.log(name);
    setName("");
}, [name, setName])
nursery/useExhaustiveDependencies.js:2:1 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━

   This hook specifies more dependencies than necessary.
  
    1 │ const [name, setName] = useState();
  > 2 │ useEffect(() => {
   ^^^^^^^^^
    3 │     console.log(name);
    4 │     setName("");
  
   This dependency can be removed from the list.
  
    3 │     console.log(name);
    4 │     setName("");
  > 5 │ }, [name, setName])
             ^^^^^^^
    6 │ 
  
let a = 1;
const b = a + 1;
useEffect(() => {
    console.log(b);
})
nursery/useExhaustiveDependencies.js:3:1 lint/nursery/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━

   This hook do not specify all of its dependencies.
  
    1 │ let a = 1;
    2 │ const b = a + 1;
  > 3 │ useEffect(() => {
   ^^^^^^^^^
    4 │     console.log(b);
    5 │ })
  
   This dependency is not specified in the hook dependency list.
  
    2 │ const b = a + 1;
    3 │ useEffect(() => {
  > 4 │     console.log(b);
                   ^
    5 │ })
    6 │ 
  

Valid

let a = 1;
useEffect(() => {
    console.log(a);
}, [a]);
const a = 1;
useEffect(() => {
    console.log(a);
});
const [name, setName] = useState();
useEffect(() => {
    console.log(name);
    setName("");
}, [name])