title: setTimeout function in useEffect outputs a cached state value
body: <p>It's simple.
  I'm using Redux to manage my state</p>
  <p>I have a <code>setTimeout</code> function in a <code>useEffect</code> function.</p>
  <p>The <code>setTimeout</code> has a timeout value of <code>50000</code>ms.</p>
  <h1>What I Want The SetTimeout Handler To Do</h1>
  <p>After <code>50000ms</code> the <code>setTimeout</code> function checks if an api call response has been recieved yet.</p>
  <p>If the response hasn't been received yet, the <code>setTimeout</code> function should reinitiate the api call because then the call would have been deemed as timedout.</p>
  <h1>What The Callback Handler Is Doing</h1>
  <p>After <code>50000ms</code>, the setTimeout handler still reinitiates the api call even though the response has been recieved.</p>
  <p>I tried logging the output of the state and then it returned a cached state even though the state was passed to the dependency array of the <code>useEffect</code> function and should have been updated</p>
  <p>After the api call has been made, the <code>testDetails.isUpdatingTestDetails</code> state is set to <code>false</code></p>
  <p>I tried out several logics and none of them are working</p>
  <h1>Logic 1</h1>
  <pre><code> useEffect(() =&gt; {
           //Notice how i check if the testDetails is being updated before initiating the setTimeout callback
          if (testDetails.isUpdatingTestDetails === true) {
           
              setTimeout(() =&gt; {
  // Inside the settimeout function the same check is also done.
  // even though before 50 seconds the response is being received , the function logs the text simulating the reinitiation of an api call
                  return testDetails.isUpdatingTestDetails === true &amp;&amp;
                      console.log(&quot;After 50 Seconds You Need To Refetch This Data&quot;)
              }, 50000);
          }
   
  
      }, [testDetails.isUpdatingTestDetails, testDetails])
  </code></pre>
  <h1>Logic 2</h1>
  <pre><code>     useEffect(() =&gt; {
           setTimeout(() =&gt; {
             return testDetails.isUpdatingTestDetails === true &amp;&amp;
               console.log(&quot;After 50 Seconds You Need To Refetch This Data&quot;)
              }, 50000);
      }, [testDetails.isUpdatingTestDetails, testDetails])
  
  </code></pre>
  <p>None of the logic i've applied above are working.</p>