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

Tran Thinh · Accepted Answer · 2022-02-23 09:37:07Z

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, 2022 at 9:37

Tran Thinh

362 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

thedude Over a year ago

you are missing a dependency in you effect. it will not run when isAuthenticated changes it's value

Sachihiro Over a year ago

The problem is that I don't want to declare const dispatch.. unless the user is authenticated.

thedude Over a year ago

@Sachihiro why? why not declare it?

Tran Thinh Over a year ago

@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) ? <DoSomething /> : null

Sachihiro Over a year ago

@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.

Collectives™ on Stack Overflow

ReactJS - Conditionally call hooks

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related