title: React hooks - how to force useEffect to run when state changes to the same value?
body: <p>So I'm building a drum-pad type of app, and almost everything is working, except this.</p>
  <p>Edit: Put the whole thing on codesandbox, if anyone wants to have a look: codesandbox.io/s/sleepy-darwin-jc9b5?file=/src/App.js</p>
  <pre><code>const [index, setIndex] = useState(0);
  const [text, setText] = useState(&quot;&quot;);
  const [theSound] = useSound(drumBank[index].url)   
  
  function playThis(num) {
    setIndex(num)
  }
  
  useEffect(()=&gt;{
    if (index !== null) {
      setText(drumBank[index].id);
      theSound(index);
      console.log(index)
    }
  }, [index])
  </code></pre>
  <p>When I press a button, the index changes to the value associated with the button and then the useEffect hook plays the sound from an array at that <strong>index</strong>. However, when I press the same button more than once, it only plays once, because useState doesn't re-render the app when the <strong>index</strong> is changed to the same value.</p>
  <p>I want to be able to press the same button multiple times and get the app to re-render, and therefore useEffect to run every time I press the button. Can anyone help me how to do this?</p>