title: React: the React State Hook does not change the value of the state variable
body: <h1>the case</h1>
  <p>I wrote a piece of code changing the state of a variable when the onClick event is triggered</p>
  <p>Unfortunately it State change is NOT taken into account</p>
  <p>Do you have an idea?</p>
  <p>thank you for the time you will invest in this issue</p>
  <h2>the definition of the state variable in &quot;browse_movie_db.js&quot;</h2>
  <pre class="lang-js prettyprint-override"><code>export function BrowseMovieDBContainer({ slides }) {
    const [category, setCategory] = useState(&quot;movie&quot;);
  ....
  }
  
  </code></pre>
  <h2>Hook triggered when the category is updated in &quot;browse_movie_db.js&quot;</h2>
  <pre class="lang-js prettyprint-override"><code> useEffect(() =&gt; {
      console.warn(&quot;usecategory has changed to &quot;, category);
    }, [category]);
  </code></pre>
  <h2>the code containing the onClick in &quot;browse_movie_db.js&quot;</h2>
  <pre class="lang-js prettyprint-override"><code>return profile.displayName ? (
      &lt;&gt;
        {loading ? &lt;Loading src={user.photoURL} /&gt; : &lt;Loading.ReleaseBody /&gt;}
  
        &lt;Header&gt;
          &lt;Header.Frame&gt;
            &lt;Header.Group&gt;
              &lt;Header.Logo to={ROUTES.HOME} src={logo} alt=&quot;AltFlow&quot; /&gt;
              &lt;Header.TextLink
                active={category === &quot;tv&quot; ? &quot;true&quot; : &quot;false&quot;}
                onClick={() =&gt; {
                  console.warn(&quot;setCategory(tv)&quot;);
                  setCategory(&quot;tv&quot;);
                  console.warn(&quot;new category: &quot;, category);
                }}
              &gt;
                TV Series
              &lt;/Header.TextLink&gt;
              &lt;Header.TextLink
                active={category === &quot;movie&quot; ? &quot;true&quot; : &quot;false&quot;}
                onClick={() =&gt; {
                  console.warn('setCategory(&quot;movie&quot;)');
                  setCategory(&quot;movie&quot;);
                  console.warn(&quot;new category: &quot;, category);
                }}
                &gt;
                Movies
              &lt;/Header.TextLink&gt;
            &lt;/Header.Group&gt;
       
        &lt;/Header.Frame&gt;
       &lt;/Header&gt;
  
     &lt;/&gt;
    ) : (
      &lt;SelectProfileContainer user={user} setProfile={setProfile} /&gt;
    );
  }
  
  </code></pre>
  <h2>the logs output</h2>
  <p><a href="https://i.stack.imgur.com/4mahK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4mahK.png" alt="logs output when the onClick event is triggered" /></a></p>