Skip to content

Can I use React hooks inside a conditional?

New Course Coming Soon:

Get Really Good at Git

No.

I do not know why technically, but it’s not possible.

I stumbled on this while working with SWR and in particular the useSWR hook.

const ({ data } = useSWR(`/api/user`, fetcher)

I wanted to only retrieve some data from an API when the user was logged in, and I thought “ok, I can do this”:

let data

if (loggedIn) {
  ;({ data } = useSWR(`/api/user`, fetcher)
}

but.. no.

React will raise errors in the console, maybe an error that reads:

Warning: React has detected a change in the order of Hooks called by Course. This will lead to bugs and errors if not fixed.

The solution will be different depending on the hook used. In this case a very quick and efficient solution was provided by the useSWR hook, because I could pass null instead of the API endpoint to avoid loading the data:

const ({ data } = useSWR(loggedIn ? `/api/user` : null, fetcher)

I moved the conditional inside the hook call, and this made it work for me.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Get my React Beginner's Handbook
→ Read my full React Tutorial on The Valley of Code

Here is how can I help you: