title: How to stop auto re-render on components by using useEffect hook?
body: <p>I am using <code>useEffect</code> hook and I have two states.<br/>
  The two states depend on each other; which means that when I change one state <code>basecurrency</code> then the other state <code>totalamount</code> also gets updated and visa versa.</p>
  <p>Each state has different functions that are called when states change.<br/>Initially both states are set as value 0.</p>
  <p><strong>Challenge</strong><br/>
  Whenever the component is loaded, the page re-renders continously due to state changes and am not able to enter any input.</p>
  <pre class="lang-js prettyprint-override"><code> useEffect(() =&gt; {
      getRequest(&quot;/user/get-user-details&quot;)
        .then(d =&gt; {
          if (d.code == 1) {
            localStorage.setItem(&quot;username&quot;, `${d.user.name}`);
            setuseremail(d.user.email);
            setusernumber(d.user.mobileNumber);
  
            postEwalletRequest(&quot;showEWalletBalance&quot;, {
              wallet_id: d.user.mobileNumber
            })
              .then(res =&gt; {
                console.log(res);
                if (res.status == 1) {
                  setballance(res.data.balance);
                }
              })
              .catch(error =&gt; {
                console.log(error);
              });
      inclusiveTask();
      exclusiveTask();
    }, [basecurrency,totalamount]);
  </code></pre>
  <p>These are the functions:</p>
  <pre class="lang-js prettyprint-override"><code>const inclusiveTask=()=&gt;{
    getRequest(&quot;/get-all-conversionPricelistforconsumer&quot;)
      .then(res =&gt; {
        setCurrList(res.saveConversionPriceList);
        setExchangeRate(res.saveConversionPriceList[0].amount);
        const converstionPrice = basecurrency * exchangeprice;
        // console.log(&quot;convert&quot;, converstionPrice);
  
        setconvertCurrency(converstionPrice);
        console.log(&quot;setconvertCurrency&quot;, convertcurrency);
        const Amount = `${
          converstionPrice - (converstionPrice * gatewaycharge) / 100
        }`;
        setTotalAmount(Amount);
        const transfee = Amount - converstionPrice;
        setChargeAmount(transfee);
        console.log(&quot;Amount&quot;, Amount);
        console.log(&quot;transfee&quot;, transfee);
      })
      .catch(error =&gt; {
        console.log(error);
      });
  
   }
  
  const exclusiveTask = () =&gt; {
    getRequest(&quot;/get-all-conversionPricelistforconsumer&quot;)
     .then(res =&gt; {
       setCurrList(res.saveConversionPriceList);
       setExchangeRate(res.saveConversionPriceList[0].amount);
       const Extotal= totalamount/exchangeprice;//100cad
       console.log(&quot;Extotal&quot;, Extotal);
       const ExclufeeAmount = `${
         totalamount - (totalamount * gatewaycharge) / 100
       }`; //28500
       console.log(&quot;ExclufeeAmount&quot;, ExclufeeAmount);
       const excluService = totalamount -  ExclufeeAmount;//1500
  
       const extracharge = excluService / exchangeprice;//5
       console.log(&quot;extracharge&quot;, extracharge);
  
       const TotalExclusive = Extotal + extracharge;
       console.log(&quot;TotalExclusive&quot;, TotalExclusive);
       setCurrency(TotalExclusive);
      
     })
     .catch(error =&gt; {
       console.log(error);
     });
  };
  </code></pre>
  <p>Please suggest any solution to help me fix this issue.</p>