title: Navigate with react-router-dom after useEffect-based setState
body: <p>I'm using <a href="https://github.com/soyguijarro/react-storage-hooks" rel="nofollow noreferrer">react-storage-hooks</a>, which provides a way to have a global state using localStorage. Internally, it seems like calling a setValue function waits until the next render using useEffect. This is an issue because I want to set this local storage value and immediately navigate programmatically to a different page using <a href="https://reacttraining.com/react-router/web/" rel="nofollow noreferrer">react-router-dom</a>.</p>
  
  <p>Here is a simplified example</p>
  
  <pre><code>import React from 'react';
  import { useHistory } from 'react-router-dom';
  import { useStorageState } from 'react-storage-hooks';
  
  export function Example() {
    const history = useHistory();
  
    // I'm ignoring writeError as it isn't relevant for this example
    const [value, setValue, writeError] = useStorageState&lt;string&gt;(
      localStorage,
      'test',
      'initial value'
    );
  
    return (
      &lt;div&gt;
        &lt;p&gt;Current Value: {value}&lt;/p&gt;
        &lt;button
          onClick={() =&gt; {
            // Set value to a new value 
            // This operation is delayed until the next render with useEffect internally
            setValue('new value');
            // Navigate to a different page after setting the value
            history.push('/');
          }}
        &gt;
          Click Me
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I was thinking of having an extra useState variable called <code>navigateOut</code> so instead of directly calling <code>history.push()</code> I can simply call it on the next render with an <code>if (navigateOut) history.push();</code> call but that seems kind of messy.</p>
  
  <p>This would probably be easier if setValue had some kind of callback/promise-based API but that doesn't seem to be the case. So I guess my question is, what is the idiomatic/hook-based approach to go about this?</p>
  
  <p>EDIT: I realized I forgot to specify something in my example. I need to differentiate between simply modifying the value and modifying + navigating. As in, I should be able to setValue without redirecting unless I specify it to do so.</p>