React useContext & useEffect show stale data - reactjs

Question

https://codesandbox.io/s/react-usecontextuseeffect-stale-data-bug-l81sn
In a component I use useEffect to do something when a certain value changes. Now it's only the value of a simple counter, but in the real world it would be a array where items are removed or added etc. A little bit more complex.
In the useEffect I also have a resize detection. Again, in this example not very interesting.
const App = props => {
const [count, dispatch] = useReducer((state, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}, 0);
return (
<CountContext.Provider value={{ count, dispatch }}>
<div className="App">
<h1>App</h1>
<Counter />
</div>
</CountContext.Provider>
);
};
const Counter = () => {
const counter = useContext(CountContext);
useEffect(() => {
window.addEventListener('resize', () => {
console.log(counter.count);
})
},[counter])
return (
<div className="Counter">
<p>Counter: {counter.count}</p>
<input
type="button"
value="+"
onClick={() => counter.dispatch({ type: 'INCREMENT' })}
/>
<input
type="button"
value="-"
onClick={() => counter.dispatch({ type: 'DECREMENT' })}
/>
</div>
);
};
The issue is that when I resize the viewport the console.log(counter.count) shows all previous values:

Answer 1

The issue is a memory leak in the useEffect() method. You need to clean up on re-renders. I forked your sandbox and tested it with this and it works as expected:
useEffect(() => {
const resizeEvent = () => {
console.log(counter.count);
};
window.addEventListener("resize", resizeEvent);
return () => {
window.removeEventListener("resize", resizeEvent);
};
}, [counter]);
Notice the return for the clean up and the refactor of your code to a called function so that it can be correctly removed on dismount.

Answer 2

You add a new one eventListener every time your state changes. Three changes - three eventListeners. Moreover, when your Counter component is unmounted, the listeners keep alive that cause memory leaks.
First of all, you can take this part outside of useEffect:
window.addEventListener('resize', () => {
console.log(counter.count);
})
Or you should use empty array as dependencies list in useEffect, then it will fire just once:
useEffect(() => {
}, []) // empty array here says 'do it once'
And finally, useEffect is a perfect place for fetching data or subscribing for events etc. But do not forget to clear all it up after component is not needed anymore. For doing this, return cleaning function in useEffect:
useEffect(() => {
// your main logic here
...
// cleaning up function:
return () => {
removeEventListener, unsubscribe etc...
}
}, [])