CODEWITHSUNDEEP
reactjsreduxreact-redux
nibble
nibble

Reputation: 404

Using connect and mapDispatchToProps with functional components

I am experimenting with Redux. I understand to dispatch action to the store from functional components, one can subscribe using useDispatch hook. I am dispatching action from useEffect and according to react-redux doc., dispatch can be omitted from list of dependencies to useEffect because its identity is stable .

  const TriviaCategories = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({ type: "SET_CATEGORIES", triviaCategories });
  }, []);
  return null;
};

If i decide to use connect to subscribe to the store, will the dispatch function identity still be stable like with useDispatch hook?

Upvotes: 2

Views: 201

Answers (1)

markerikson
markerikson

Reputation: 67459

The dispatch function will always be stable as long as you continue to pass the same Redux store instance to your <Provider store={store}>, because dispatch is simply store.dispatch.

However, the React "hook dependencies" lint rule does not know this. It knows that functions from React's built-in hooks (useState setters and useReducer dispatch functions) are always stable, so it can special-case and ignore those, but it has no way of knowing that the React-Redux dispatch function should be stable. So, it will always warn that you need to add it to the effect deps array.

Because of that, you might as well just always add it to the deps array.

Upvotes: 1

Related Questions