title: React useState is working on one state but not the other
body: <p>I'm currently trying to make a wordle style game with react.</p>
  <p>In my main component, I have a useEffect that runs once to initialize some things as well as creating a &quot;keydown&quot; eventListener.</p>
  <pre class="lang-js prettyprint-override"><code>  useEffect(() =&gt; {
      //These two functions getWordList and updateColors don't really matter much for this issue I think.
      const getWordList = async () =&gt; {
        let response = await fetch(wordListUrl);
  
        var wordList = await response.text();
  
        var wordListArr = wordList.split(&quot;\n&quot;);
  
        setWords(wordListArr);
  
        const randomWord =
          wordListArr[Math.floor(Math.random() * wordListArr.length)];
  
        setAnswer(randomWord);
      };
  
      const updateColors = async () =&gt; {
        const newColors = {} as any;
  
        for (let c of alphabet) {
          newColors[c] = &quot;bg-gray-400&quot;;
        }
  
        setColors(newColors);
      };
  
      //THIS FUNCTION is the one that's probably causing an issue.
  
      const setupKeys = async () =&gt; {
        document.addEventListener(&quot;keydown&quot;, logKey);
  
        function logKey(e: any) {
          if (e.code.match(/Key[A-Z]/)) {
            handleInput(e.code[3].toLowerCase());
          }
          if (e.code == &quot;Enter&quot; || e.code == &quot;Backspace&quot;) {
            handleInput(e.code);
          }
        }
      };
  
      getWordList();
      updateColors();
      setupKeys();
    }, []);
  </code></pre>
  <p>I then have my handleInput function written outside of the useEffect but inside the component as follows:</p>
  <pre class="lang-js prettyprint-override"><code>  const handleInput = (keyPress: string) =&gt; {
      console.log(keyPress);
      if (keyPress == &quot;Enter&quot;) {
        return;
      }
  
      if (keyPress == &quot;Backspace&quot;) {
        return;
      }
  
      let oldWord = (curWord + keyPress).slice(0, 5);
  
      setCurWord(oldWord);
  
      let currentBoard = board;
      currentBoard[curLine] = oldWord;
  
      while (currentBoard[curLine].length &lt; 5) currentBoard[curLine] += &quot; &quot;;
  
      setBoard([...currentBoard]);
    };
  </code></pre>
  <p>For some reason when I run this code though, the board is updating on my keypresses but the curWord state is never stored. What I mean is that when I console.log curWord, it's always the empty string it's initialized to but the board gets updated appropriately. I'm not sure why the board is being updated but the word isn't.</p>
  <p>I've tried messing around with useCallback but none of it has worked.</p>
  <p>Some help would be really appreciated.</p>