CODEWITHSUNDEEP
javascriptreactjs
Sachihiro
Sachihiro

Reputation: 1781

ReactJS - Conditionally call hooks

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

Upvotes: 0

Views: 6534

Answers (1)

Tran Thinh
Tran Thinh

Reputation: 36

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 (
    ...
  )
}

Upvotes: 2

Related Questions