useEffectReducer
useEffectReducer copied to clipboard
Non-memoized / ref'd reducer runs into double dispatch issue when used in custom hook
Hello! First off, love this library so much, it's made my code so much more clean.
Simplified reproduction: https://codesandbox.io/s/red-https-bxpo0?file=/src/App.tsx
But anyways, I've run into this scenario recently and was able to resolve by resolving this locally - but, to be honest, I'm not really sure of the React internals enough to PR this + test. Anyways, the scenario
- I want to use
useEffectReducer
in my own hook and export out it's dispatch so that other components can programmatically send out events to the reducer. - However, when I leverage the dispatch it emits events twice.
- To resolve, you can
useMemo
thewrappedReducer
.
const memoReducer = useMemo(() => wrappedReducer, []);
const [[state, effectStateEntityTuples, entitiesToStop], dispatch] = useReducer(
memoReducer,
initialStateAndEffects
);
I'd appreciate a PR with this change!
Also, note that logging to console is itself an effect, so if you do:
function useMyHook() {
const [state, dispatch] = useEffectReducer((state, action, exec) => {
exec(() => console.log("action: ", action));
return state;
}, []);
return {
state,
dispatch
};
}
Then it will log correctly.
Ah you're right! I'll open a PR with the proposed change, but let me know if you want a more exhaustive example
Updated with a more complicated example! I think, maybe, some of this probably relates back to the usage of Maps in component state
https://codesandbox.io/s/red-https-bxpo0?file=/src/App.tsx