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]);
}