title: Forcing a react functional component to trigger a rerender
body: <p>I'm trying to get a functional component to force a rerender whenever the <code>testFn</code> executes. I thought to use state to do this (if there's a better way then please speak up), which appears to successfully force a rerender but only twice, then nothing.</p>
  <p>I built a simple demo to emulate the issue as using my real app is too difficult to demonstrate but the same principles should presumably apply (my real demo fetches data when the function executes and displays it on the page, but it's not rerendering and I have to refresh the page to see the new data, hence why I want to trigger a rerender).</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  const App = () =&gt; {
    const [, rerender] = useState(false);
  
    const testFn = () =&gt; {
      console.log(&quot;test Fn&quot;);
      rerender(true);
    };
  
    return (
      &lt;div&gt;
        &lt;p&gt;test&lt;/p&gt;
        &lt;button onClick={testFn}&gt;clickk&lt;/button&gt;
        {console.log(&quot;render&quot;)}
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>I've also made a <a href="https://stackblitz.com/edit/react-ecsurk" rel="nofollow noreferrer">Stackblitz</a> demo for conveinence.</p>
  <p>Can anyone solve this demo or think of a better way of implementing it?</p>
  <p>Thanks for any help here.</p>