So I had this issue with using Hook inside Initialize Function of react useReducer Hook, as a third argument to it.
And the problem is that I was getting
Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function.
The problem is that i was using Hook inside of Initialize function of useReducer Hook
And it took me a while to find where I was getting this from.
As a solution I tried to pass that hook value that Im trying to get inside of Initialize function directly from the functional component where I use the useReducer hook but it turns out that init function only accepts only one argument so that was a bummer 🙃 .
My simple and time saving solution was just to get rid of the init function and set try to determine initial state directly in my functional component and that worked just fine
Before
export const InitState = (initialState) => {
const hookMeUp = useMyHook(); // <- PROBLEM
return {
...initialState,
yyy: hookMeUp.yyy,
};
};
export const FunComp = ()=>{
const initialState = {
xxx: 1,
yyy: 2,
};
const [state, dispatch] = React.useReducer(MyReducerFun, initialState, InitState);
...aaand so onnn...
}
After
export const FunComp = ()=>{
const hookMeUp = useMyHook();
****
const xxx = hookMeUp.xxx;
const yyy = hookMeUp.yyy;
const initialState: MyStateType = {
xxx,
yyy
};
React.useEffect(() => {
const onResizeCallBack = () => dispatch({ type: "onResize" });
window.addEventListener("resize", onResizeCallBack);
return () => window.removeEventListener("resize", onResizeCallBack);
});
const [state, dispatch] = React.useReducer(MyReducerFun, initialState);
...aaand so onnn...
}
links:
Top comments (0)