React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps
I use useDispatch()
Hook from React Redux on a functional component like this:
const Component = () => {
const dispatch = useDispatch();
const userName = useSelect(state => state.user.name);
useEffect(() => {
dispatch(getUserInformation());
}, [userId]);
return (
<div>Hello {userName}</div>
);
};
export default Component;
How to remove this warning without removing the dependency array react-hooks/exhaustive-deps which can be useful to avoid other errors.
To avoid that warning simply add dispatch
to the dependency array. That will not invoke re-renders because dispatch value will not change.
const Component = () => {
const dispatch = useDispatch();
const userName = useSelect(state => state.user.name);
useEffect(() => {
dispatch(getUserInformation());
}, [userId, dispatch]);
return (
<div>Hello {userName}</div>
);
};
export default Component;
React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps
I use useDispatch()
Hook from React Redux on a functional component like this:
const Component = () => {
const dispatch = useDispatch();
const userName = useSelect(state => state.user.name);
useEffect(() => {
dispatch(getUserInformation());
}, [userId]);
return (
<div>Hello {userName}</div>
);
};
export default Component;
How to remove this warning without removing the dependency array react-hooks/exhaustive-deps which can be useful to avoid other errors.
React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps
I use useDispatch()
Hook from React Redux on a functional component like this:
const Component = () => {
const dispatch = useDispatch();
const userName = useSelect(state => state.user.name);
useEffect(() => {
dispatch(getUserInformation());
}, [userId]);
return (
<div>Hello {userName}</div>
);
};
export default Component;
How to remove this warning without removing the dependency array react-hooks/exhaustive-deps which can be useful to avoid other errors.
Simply add dispatch
to your dependency array or make the dependency array empty.
First Case:
const Component = () => {
const dispatch = useDispatch();
const userName = useSelect(state => state.user.name);
useEffect(() => {
dispatch(getUserInformation());
}, [userId, dispatch]);
return (
<div>Hello {userName}</div>
);
};
export default Component;
Second Case:
const Component = () => {
const dispatch = useDispatch();
const userName = useSelect(state => state.user.name);
useEffect(() => {
dispatch(getUserInformation());
}, []);
return (
<div>Hello {userName}</div>
);
};
export default Component;
By adding these dependencies, your useEffect may cause re-rendering or not re-render at all. It all depends on your data and the context in which you use it.
Anyways, if you do not wish to follow both the above methods then //ts-ignore can work but I will not recommend this as this may create bugs in the long run.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.