admin管理员组

文章数量:1327849

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 ponent 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 ponent 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.

Share Improve this question edited Feb 11, 2020 at 17:58 Muhammad Zeeshan 4,7484 gold badges18 silver badges42 bronze badges asked Feb 11, 2020 at 17:47 IgnacioIgnacio 831 silver badge4 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 8

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;

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 remend this as this may create bugs in the long run.

本文标签: