I noticed that when I was using useContext + userReducer + typescript that I could end up getting multiple re-renders when just dispatch updated.
I found this Article
Which showed me that I could split my state and dispatch context into two.
before change:
const App: React.FC = () => {
const rootReducer = combineReducers({
global: globalReducer,
items: ItemReducer,
});
const [state, dispatch] = React.useReducer(rootReducer, initalState);
const store = React.useMemo(() => ({ state, dispatch }), [state, dispatch]);
return (
<Context.Provider value={store}>
// children
</Context.Provider>
);
};
export default App;
Context:
interface IContextProps {
state: StateType;
dispatch: Dispatch<Action>;
}
const Context = React.createContext({} as IContextProps);
export const useCustomContext = (): IContextProps => {
return React.useContext(Context);
};
export default Context;
After change:
const App: React.FC = () => {
const rootReducer = combineReducers({
global: globalReducer,
items: ItemReducer,
});
const [state, dispatch] = React.useReducer(rootReducer, initalState);
return (
<ContextDispatch.Provider value={dispatch}>
<ContextState.Provider value={state}>
// children
</ContextState.Provider>
</ContextDispatch.Provider>
);
};
export default App;
Context:
export interface IContextPropsState {
state: StateType;
}
export interface IContextPropsDispatch {
dispatch: Dispatch<Action>;
}
export const ContextDispatch = React.createContext({} as IContextPropsDispatch);
export const ContextState = React.createContext({} as IContextPropsState);
export const useCustomContextDispatch = (): IContextPropsDispatch => {
return React.useContext(ContextDispatch);
};
export const useCustomContextState = (): IContextPropsState => {
return React.useContext(ContextState);
Would be used in a component like:
const { dispatch } = useCustomContextDispatch();
const { state } = useCustomContextState();
My original attempt worked and I got data but in the new approach both state and dispatch are undefined...why?
