title: React: State remains initial value in event listener
body: <p>I am making a word game in which 2 players take turns adding a letter to a string, trying to make the opposing player make a word. When the application mounts, an event listener is added that detects when a key is pressed. When the key is pressed there is a condition that checks if the key pressed is a letter and if it is the player's turn. If it is the player's turn, the key pressed should be added to the string being created and should be displayed. However, yourTurn remains undefined in this event listener not allowing for anything to be displayed. How can I make it so this state is defined in my event listener and so that it has the current state of yourTurn at all times? Below is my code...</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import { io } from &quot;socket.io-client&quot;;
  // import { v4 as uuidv4 } from 'uuid';
  import &quot;./App.css&quot;;
  
  function App() {
    const socket = io(&quot;http://localhost:5001&quot;);
  
    //Keeps state of string being created by the users
    const [word, setWord] = useState(&quot;&quot;);
  
    //Keeps state of your score
    const [yourScore, setYourScore] = useState(&quot;&quot;);
  
    //Keeps state of opponent's score
    const [opponentScore, setOpponentScore] = useState(&quot;&quot;);
  
    const [yourTurn, setYourTurn] = useState();
  
    //Users pull a leter from here if they lose a round
    const array = [&quot;G&quot;, &quot;H&quot;, &quot;O&quot;, &quot;S&quot;, &quot;T&quot;];
  
    let room; //room player is in
  
    useEffect(() =&gt; {
      socket.on(&quot;connect&quot;, () =&gt; {
        socket.on(&quot;send-letter-back&quot;, (letter) =&gt; {
          setWord((prev) =&gt; prev + letter);
          setYourTurn(true);
        });
  
        socket.emit(&quot;join-room&quot;, (cb) =&gt; {
          console.log(cb);
          room = cb.room;
          console.log(&quot;cbYourTurn: &quot; + cb.yourTurn);
          setYourTurn(cb.yourTurn);
        });
      });
  
      document.addEventListener(&quot;keydown&quot;, (event) =&gt; {
        //If the key pressed is a letter, then that letter
        //can be appended to the string being created by the users.
  
        console.log(yourTurn);
  
        if (yourTurn &amp;&amp; event.key.length === 1 &amp;&amp; event.key.match(/[a-z]/i)) {
          socket.emit(&quot;userinput&quot;, event.key, room);
          setWord((prev) =&gt; prev + event.key);
  
          //If not, the current player will be notified to enter a letter.
        } else {
          alert(&quot;you must enter a letter or wait your turn.&quot;);
        }
        console.log(event.key);
      });
    }, []);
  
    async function check() {
      //First check if word exists and is greater than length 3
      axios.get(&quot;http://localhost:5000/isword/&quot; + word).then((res) =&gt; {
        console.log(&quot;word:&quot; + res.data);
        if (res.data &amp;&amp; word.length &gt; 3) {
          //if so, then the player to put the letter down, loses the round
          //Add a letter to the losing player
  
          console.log(yourTurn);
          if (yourTurn) {
            console.log(&quot;in losing&quot;);
            setYourScore((prev) =&gt; prev + array[prev.length]);
            setYourTurn(false);
          } else {
            setOpponentScore((prev) =&gt; prev + array[prev.length]);
            setYourTurn(true);
          }
          setWord(&quot;&quot;);
        }
      });
  
      //else check if the stem exists
      //if it doesn't, the player that put the letter down loses the round
  
      axios.get(&quot;http://localhost:5000/isstem/&quot; + word).then((res) =&gt; {
        console.log(&quot;stem:&quot; + res.data);
      });
    }
  
    useEffect(() =&gt; {
      check();
    }, [word]);
  
    return (
      &lt;div&gt;
        &lt;div&gt;
          &lt;h2&gt;You&lt;/h2&gt;
          &lt;h4&gt;{yourScore}&lt;/h4&gt;
          &lt;h2&gt;Opponent&lt;/h2&gt;
          &lt;h4&gt;{opponentScore}&lt;/h4&gt;
        &lt;/div&gt;
        &lt;h1&gt;{word}&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>