With the risk of being a duplicate question, because I am sure that it has been asked several times, as seen from this popular post. I have this case when I want to check first if it is authenticated and if not, it should skip the rest computations.
How can I utilize useEffect or some other hook for this problem, given the code below:
React Hook "useDispatch" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook "useSelector" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
Component
export const DoSomething: FunctionComponent = () => {
const isAuthenticated = useSelector<State, boolean>((state) => state.isAuthenticated);
if (isAuthenticated === false) {
return <Navigate to='/login' />
}
const dispatch = useDispatch();
const { initialDay: initialDay = '0' } = useParams();
useEffect(() => {
// Do another thing here
dispatch(foo());
}, [dispatch]);
return (
...
)
}
I tried to wrap with an if...else statement like this:
if (isAuthenticated){
const dispatch = useDispatch();
const { initialDay: initialDay = '0' } = useParams();
useEffect(() => {
// Do another thing here
dispatch(foo());
}, [dispatch]);
}
but the problem still persist
If you early return somethings before the hook is invoked, it breaks the rules of hook. If you want to check any conditions, put it inside the callback, it guarantee that the hook is called properly through every render.
export const DoSomething: FunctionComponent = () => {
const isAuthenticated = useSelector<State, boolean>((state) => state.isAuthenticated);
const dispatch = useDispatch();
const { initialDay: initialDay = '0' } = useParams();
useEffect(() => {
if (isAuthenticated === false) {
return;
} else {
dispatch(foo());
}
}, [dispatch]);
if (isAuthenticated === false) {
return <Navigate to='/login' />
}
return (
...
)
}