ReactJS - Conditionally call hooks

Question

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

score 2 · Accepted Answer · answered Feb 23 '22 at 09:37

2

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

answered Feb 23 '22 at 09:37

Tran Thinh

36
2

you are missing a dependency in you effect. it will not run when `isAuthenticated` changes it's value – thedude Feb 23 '22 at 09:43
The problem is that I don't want to declare `const dispatch..` unless the user is authenticated. – Sachihiro Feb 23 '22 at 10:29
@Sachihiro why? why not declare it? – thedude Feb 23 '22 at 12:37
@Sachihiro, you have to declare it, I know that you want to optimize, but that's not the way hook work. If you want to do so ? why don't you render conditionally your entire component ? if (authenticated) ? : null – Tran Thinh Feb 24 '22 at 03:07
@TranThinh I tried that but still the same errors. I will figure out something, I thought maybe there is a suggested way of doing this. – Sachihiro Feb 24 '22 at 07:52

ReactJS - Conditionally call hooks

1 Answers1