Lint Rules

useExhaustiveDependencies (since v10.0.0)

Enforce all dependencies are correctly specified.

Examples

Invalid

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

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

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

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

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

Valid

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