title: Is there any way to call useeffect until the data had been fetched properly?
body: <p>I want to fetch my data from backend mongodb but the useeffect is rendering only once and at that moment data is not fetched quickly resulting in lots of undefined errors.
  Here is my code:</p>
  <pre><code>const [xnaLogData,setXnaLogData]=useState([]);
  const [xnaLogMember,setXnaLogMember]=useState(&quot;&quot;);
  const [balance,setBalance]=useState(0);
   
  useEffect(() =&gt; {
      setXnaLogMember(Cookies.get('member_userr'));
      alert(xnaLogMember);
      const calBal = () =&gt; {
          var sum = xnaLogData.reduce(function(prev, current) {
              return prev + +current.balance
          }, 0);
          setBalance(sum);
      }
  
      const fetchXna = async () =&gt; {
          const response = await fetch('/xnaloginforoute');
          const json = await response.json();
          setXnaLogData(json.xnacomp);
          calBal();
          console.log(json.xnacomp)
          console.log(xnaLogData);
      }
  
      fetchXna();
  },[]);
  </code></pre>
  <p>If i put <code>},[xnaLogData]);</code> inside the useeffect line <code>},[]);</code> it will start a continous chain of useeffect and the data is fetching in 3rd or 4th attempt of effect. I am unable to solve this issue</p>