title: How can I call a useEffect only once after everything loads from redux useSelector hooks?
body: <p>I'm new to React and am wondering if it's possible to use a useEffect that will run only once after all the Redux data has been loaded.</p>
  <p>I'm trying to disable the &quot;Buyer&quot; and &quot;Seller&quot; dropdowns if there has been a specified Seller AND Buyer. However if there is only a Buyer or only a Seller while the other is still not selected (still has default value of -1), I want to be able to use the dropdown to select the buyer/sellers without the dropdowns immediately disabling after a buyer and seller has been selected, hence why I'm trying to only get it to run once. Instead, the dropdowns should be disabled the next time the entire page is reloaded/refreshed.</p>
  <p>The issue that I'm running into is that if I use a useEffect with an empty array of dependencies so that it will only run once, it seems like it's running before the data from the redux hooks is actually loaded. Is there a way for me to run it after everything has been loaded from redux or any other way for me to do this? Relevant Code is below.</p>
  <pre class="lang-js prettyprint-override"><code>  const [selectedBuyerNumber, setBuyerNumber] = useState(-1);
    const [selectedSellerNumber, setSellerNumber] = useState(-1);
    const [disabled, setDisabled] = useState(false);
  
    const dispatch = useDispatch();
    const buyerNumber = useSelector(selectors.buyerNumberState);
    const sellerNumber = useSelector(selectors.sellerNumberState);
    const loaded = useSelector(selectors.loadingState);
  
  
    useEffect(() =&gt; {
      loaded &amp;&amp; setBuyerNumber(buyerNumber ?? -1);
    }, [buyerNumber, loaded]);
  
    useEffect(() =&gt; {
      dispatch(setBuyerNumber(selectedBuyerNumber));
    }, [dispatch, selectedBuyerNumber]);
  
    useEffect(() =&gt; {
      loaded &amp;&amp; setSelectedSellerNumber(sellerNumber ?? -1);
    }, [sellerNumber, loaded]);
  
    useEffect(() =&gt; {
      dispatch(setSellerNumber(selectedSellerNumber));
    }, [dispatch, selectedSellerNumber]);
  
    useEffect(() =&gt; { 
        setDisabled(selectedBuyerNumber !== -1 &amp;&amp; selectedSellerNumber !== 1);
      }
    }, []);   //dependencies are empty because I only want this to run once and be disabled if both Buyer and Seller have previously been selected
  
  
  return (
  &lt;FormGroup controlId='buyer'&gt;
    &lt;ControlLabel&gt;Buyer:&lt;/ControlLabel&gt;
         &lt;FormControl
            componentClass='select'
            onChange={(e: any) =&gt; setBuyerNumber(e.target.value)}
            value={selectedBuyerNumber}
            disabled={disabled}&gt;               
  &lt;/FormGroup&gt;
              
  &lt;FormGroup controlId='seller'&gt;
     &lt;ControlLabel&gt;Seller:&lt;/ControlLabel&gt;
        &lt;FormControl
             componentClass='select'
             onChange={(e: any) =&gt; setSellerNumber(e.target.value)}
             value={selectedSellerNumber}
             disabled={disabled}&gt;
  &lt;/FormGroup&gt;
  
  
  
  
  
  
  </code></pre>