title: Stale Redux state in React hook cleanup function (Next.js)
body: <p>I've adapted a <a href="https://github.com/vercel/next.js/tree/canary/examples/with-redux-thunk" rel="nofollow noreferrer">with-redux-thunk</a> example from next.js. In this example, we are <strong>removing</strong> the redux state on the client, every time we hit the SSR page.</p>
  <p>I have 3 pages, - 2 of them are Server-side rendered, and 1 is Client-side rendered.</p>
  <p>My &quot;Goal&quot; is to reset the &quot;redux state&quot; whenever I go from Server-side pages to the Client-side page.</p>
  <p>To accomplish the goal, - in every SSR page, I've added &quot;react hook cleanup functions&quot; in which I dispatch reset actions</p>
  <pre><code>  useEffect(() =&gt; {
      return () =&gt; {
        console.log(&quot;leave ssr page 1&quot;);
        dispatch({ type: &quot;RESET&quot; });
      };
    }, [dispatch]);
  </code></pre>
  <p>But I noticed an &quot;issue&quot; - when I switch from the SSR page 1 to SSR page 2, the cleanup function dispatches a reset action to the &quot;Stale&quot; state without any effects.
  It can be seen in the browser console via redux-logger.</p>
  <p><strong>Question</strong>: Is it a critical &quot;issue&quot;, or I can just ignore it?</p>
  <p>CodeSandbox: <a href="https://codesandbox.io/s/sandbox-for-stackoverflow-redux-question-tqkpt?file=/pages/index.js" rel="nofollow noreferrer">issue sandbox</a></p>
  <p><img src="https://i.stack.imgur.com/5gS9j.png" alt="console log of issue" /></p>