⏎ 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])