title: Forcing ReactJS to update render on functional components doesn't work without a second force
body: <p>I'm working on an application where I have an array of data obtained from server (Ajax) that is rendered on screen.</p>
  <p>To select the position that I want to render (Array[0], Array[1], Array[2]), I have a component select that on select option (handle onChange), writes on localStorage the option. Then, on the render data code, I have as a position var this localStorage value.</p>
  <p>Since ReactJS doesn't re-render the screen every frame, I have to indicate React that he has to re-render the screen in order to show a different data position.</p>
  <p>To do this, I have a Hook:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function useForceUpdate() {
      const [value, setValue] = useState(0);
      return () =&gt; setValue((value) =&gt; ++value);
  }
  const forceUpdate = useForceUpdate();</code></pre>
  </div>
  </div>
  </p>
  <p>The problem is, that if I call this hook on the handle of the select component, It doesn't update the render. But if you do a second change on the select (basically, you are calling the Hook again), it draws the last one option (So if at the first time you have selected the option of value=1.. And then you select the option of value=2, it draws the value=1).</p>
  <p>I have added a button to call the function (button -&gt; forceRe-Render), and it works. So, if you choose any option and click on the button, it shows the correct information.</p>
  <p>PS: Checking the localStorage, it's working fine, so it's not a problem of localStorage.</p>
  <p>Here is the codesandbox of a summary of it:</p>
  <p><a href="https://codesandbox.io/s/sparkling-glitter-s830r?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/s/sparkling-glitter-s830r?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>