React hooks: dispatch action from useEffect

Version using react-redux hooks:

You can even cut out the connect function completely by using useDispatch from react-redux:

export default function MyComponent() {  useFetching(fetchSomething);  return <div>Doing some fetching!</div>}

with your custom hook

import { useDispatch } from 'react-redux';const useFetching = (someFetchActionCreator) => {  const dispatch = useDispatch();  useEffect(() => {    dispatch(someFetchActionCreator());  }, [])}

Edit: removed dispatch from custom hook as suggested by @yonga-springfield

Note: React guarantees that dispatch function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list.

You would need to pass either bound action creators or a reference to dispatch to your hook. These would come from a connected component, same as you would normally use React-Redux:

function MyComponent(props) {    useFetching(props.fetchSomething);    return <div>Doing some fetching!</div>}const mapDispatch = {    fetchSomething};export default connect(null, mapDispatch)(MyComponent);

The hook should then call the bound action creator in the effect, which will dispatch the action accordingly.

Also, note that your current hook will re-run the effect every time the component is re-rendered, rather than just the first time. You'd need to modify the hook like this:

const useFetching = someFetchActionCreator => {  useEffect( () => {    someFetchActionCreator();  }, [])}

This is just to bring some optimization to @Alex Hans' answer.

As per the documentation here. A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks.

With this in mind, we need not send a reference to the dispatch function to the useFetching hook as a parameter but rather, simply not send it and rather simply use it from within the useFetching hook with the appropriate imports.

Here's an excerpt of what I mean.

import { useDispatch } from 'react-redux';const useFetching = (someFetchActionCreator) => {    const dispatch = useDispatch()    useEffect(() => {    dispatch(someFetchActionCreator());  }, [])}

I can't ascertain this example will fit without errors in your codebase in your case but just trying to explain the idea/concept behind this post.

Hope this helps any future comer.