title: Block sending requests twice react-redux (hooks)
body: <p>I have some hook for fetching countries array from api :</p>
  
  <pre><code>import { useSelector, useDispatch } from 'react-redux'
  
  const useCountries = () =&gt; {
   const dispatch = useDispatch()
  
   const { countries } = useSelector(data =&gt; data)
  
   useEffect(() =&gt; {
     if (!countries.length) {
       dispatch(getCountries())
     }
   }, [countries])
  
    return {
      countries
    }
  }
  </code></pre>
  
  <p>I have some components which aren't on the same level of DOM , and aren't related to each other</p>
  
  <pre><code>const FirstComponent = () =&gt; {
    const {countries} = useCountries()
  
    // some using of countries array
  }
  
  const SecondComponent = () =&gt; {
    const {countries} = useCountries()
  
    // some using of countries array
  }
  </code></pre>
  
  <p>When page loading 2 of these components, are executed, and 2 actions are dispatched. Because countries aren't selected yet in first and in the second component it calls API request. My question is, how can I prevent sending the second request if some request was sent. Make some rule for sending request only once, if try to send the second one, then block it. Or what is the correct solution or approach in my case? </p>
  
  <p>Also, I've tried a case like this :</p>
  
  <pre><code>  const {
      external: { response, isInitial }
    } = useSelector(data =&gt; data)
  
    useEffect(() =&gt; {
      if (!response &amp;&amp; isInitial) {
        dispatch(setIsInitial(false))
  
        fetch()
          .then(res =&gt; res.json())
          .then(data =&gt; {
             setResponse(data)
          })
      }
    }, [dispatch, response, isInitial])
  </code></pre>
  
  <p>Here is my reducer :</p>
  
  <pre><code>const initialState = {
    response: null,
    isInitial: true
  }
  
  export default function external(state = initialState, action) {
    switch (action.type) {
      case types.SET_RESPONSE:
        return {
          ...state,
          response: action.payload.data
        }
      case types.SET_INITIAL:
        return {
          ...state,
          isInitial: action.payload.data
        }
  
      default:
        return state
    }
  }
  </code></pre>
  
  <p>But it sends 2 requests </p>