title: React updates the state when the app is hosted on GitHub Pages, but not when it's on localhost (or CodeSandbox)
body: <p>I've experienced a very strange behavior. This is my React app:</p>
  <pre><code>import &quot;./App.css&quot;;
  import React, { useState, useEffect } from &quot;react&quot;;
  
  const buttonsObject = [
    {
      press: &quot;q&quot;,
      source:
        &quot;https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Clap%201.mp3&quot;,
      name: &quot;&quot;,
    },
    {
      press: &quot;w&quot;,
      source:
        &quot;https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Clap%202.mp3&quot;,
      name: &quot;&quot;,
    },
    {
      press: &quot;e&quot;,
      source:
        &quot;https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Conga%20High.mp3&quot;,
      name: &quot;&quot;,
    },
    {
      press: &quot;a&quot;,
      source:
        &quot;https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Conga%20Mid.mp3&quot;,
      name: &quot;&quot;,
    },
    {
      press: &quot;s&quot;,
      source:
        &quot;https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Conga%20Low.mp3&quot;,
      name: &quot;&quot;,
    },
    {
      press: &quot;d&quot;,
      source:
        &quot;https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Cowbell.mp3&quot;,
      name: &quot;&quot;,
    },
    {
      press: &quot;z&quot;,
      source:
        &quot;https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Hihat%20Open.mp3&quot;,
      name: &quot;&quot;,
    },
    {
      press: &quot;x&quot;,
      source:
        &quot;https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Mid%20Tom.mp3&quot;,
      name: &quot;&quot;,
    },
    {
      press: &quot;c&quot;,
      source:
        &quot;https://github.com/Julian-Sz/FCC-Drum-Machine/blob/main/src/sounds/Pop%20Chord%201.mp3&quot;,
      name: &quot;&quot;,
    },
  ];
  
  //get raw file from github as source and set the name of each button
  let nameRegEx = /.+\/(.*)\.mp3$/;
  for (let i = 0; i &lt; buttonsObject.length; i++) {
    buttonsObject[i].name = decodeURI(buttonsObject[i].source).match(
      nameRegEx
    )[1];
    buttonsObject[i].source = buttonsObject[i].source + &quot;?raw=true&quot;;
  }
  
  const handleKeyPressWrapper = (setTextFunc) =&gt; {
    return (e) =&gt; {
      try {
        document.getElementById(e.key.toUpperCase()).currentTime = 0;
        document.getElementById(e.key.toUpperCase()).play();
        let name = &quot;Loading&quot;;
        for (let i = 0; i &lt; buttonsObject.length; i++) {
          if (buttonsObject[i].press === e.key) {
            name = buttonsObject[i].name;
            break;
          }
        }
  
        setTextFunc(name);
      } catch {}
    };
  };
  
  const dbHandleClickWrapper = (setTextFunc) =&gt; {
    return (e) =&gt; {
      const customkey = e.target.attributes.customkey.value;
      const button = buttonsObject[customkey];
      const id = button.press.toUpperCase();
      document.getElementById(id).currentTime = 0;
      document.getElementById(id).play();
      setTextFunc(button.name);
    };
  };
  const DrumButtons = (props) =&gt; {
    return (
      &lt;div id=&quot;db-wrapper&quot;&gt;
        {buttonsObject.map((elem, i) =&gt; {
          return (
            &lt;div className=&quot;drum-button&quot; key={i}&gt;
              &lt;button
                key={elem.press}
                className=&quot;drum-pad&quot;
                customkey={i}
                onClick={dbHandleClickWrapper(props.changetext)}
                id={elem.name}
              &gt;
                &lt;span className=&quot;front&quot;&gt;{elem.press.toUpperCase()}&lt;/span&gt;
                &lt;audio
                  key={elem.press.toUpperCase()}
                  id={elem.press.toUpperCase()}
                  src={buttonsObject[i].source}
                  className=&quot;clip&quot;
                &gt;&lt;/audio&gt;
              &lt;/button&gt;
            &lt;/div&gt;
          );
        })}
      &lt;/div&gt;
    );
  };
  
  const Display = (props) =&gt; {
    return (
      &lt;div id=&quot;display&quot;&gt;
        &lt;div id=&quot;display-text&quot;&gt;{props.text}&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  let listenerAttached = false;
  function App() {
    const [state, setState] = useState({ text: &quot;Press a button&quot; });
    useEffect(() =&gt; {
      console.log(&quot;useEffect&quot;, state);
    });
    const changeDisplayText = (text) =&gt; {
      console.log(&quot;state change function called&quot;, text);
      setState({ text: text });
      console.log(&quot;new state&quot;, state);
    };
    if (!listenerAttached) {
      document.addEventListener(
        &quot;keydown&quot;,
        handleKeyPressWrapper(changeDisplayText)
      );
      listenerAttached = true;
    }
    return (
      &lt;div className=&quot;App&quot; id=&quot;drum-machine&quot;&gt;
        &lt;Display text={state.text} /&gt;
        &lt;DrumButtons changetext={changeDisplayText} /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>When I click a button, the state of the App component changes by calling the <code>changeDisplayText</code> function. The <code>useEffect</code> function will get called and you can see the log in the console (and the display text changes). If I press a key on the keyboard, the <code>changeDisplayText</code> function will be called, but it won't change the state and the <code>useEffect</code> function won't get called too.</p>
  <p>However, if I create a deployment build of the same app using <a href="https://www.npmjs.com/package/gh-pages" rel="nofollow noreferrer">gh-pages</a> and <a href="https://github.com/gitname/react-gh-pages" rel="nofollow noreferrer">this tutorial</a> and host it on GitHub Pages, it miraculously works, and I've no idea why.</p>
  <p>Here is a link to the repository: <a href="https://github.com/Julian-Sz/FCC-Drum-Machine" rel="nofollow noreferrer">https://github.com/Julian-Sz/FCC-Drum-Machine</a></p>
  <p>Here is a link to the page on gh-pages: <a href="https://julian-sz.github.io/FCC-Drum-Machine/" rel="nofollow noreferrer">https://julian-sz.github.io/FCC-Drum-Machine/</a></p>
  <p>I've copied the repository to a CodeSandbox and look - it doesn't work again. Why does it work on GitHub Pages, and why not on localhost?</p>
  <p>Here is a link to that CodeSandbox: <a href="https://codesandbox.io/s/fcc-drum-machine-from-github-tybqs" rel="nofollow noreferrer">https://codesandbox.io/s/fcc-drum-machine-from-github-tybqs</a></p>