title: Working of `useState` function inside `useEffect` function
body: <p>I am trying to use <code>useState</code> inside <code>useEffect</code>. I want to access and modify a state inside it( <code>useEffect</code> ), here named as <code>isAuth</code> and according to the new state render the component.</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  
  const Authentication = () =&gt; {
      const [isAuth, setIsAuth] = useState(false);
  
      useEffect(() =&gt; {
          console.log(isAuth);
          setIsAuth(true);
          console.log(isAuth);
      }, [isAuth]);
      return &lt;div&gt;{isAuth ? &lt;p&gt;True&lt;/p&gt; : &lt;p&gt;False&lt;/p&gt;}&lt;/div&gt;;
  };
  
  export default Authentication;
  </code></pre>
  
  <p>The thing is in console I am getting <code>false</code>, <code>false</code>, <code>true</code>, <code>true</code>.Instead of this console, I expected the 2nd console message to be true. Can someone explain it how it happens and how do I actually change the state before component renders?</p>