โ† flaviocopes.com

Can I use React hooks inside a conditional?

Published Oct 24 2020

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.



Wanna go from noobie to expert?

I wrote an entire book on this topic ๐Ÿ‘‡

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site. Follow on Twitter

Solopreneur? Wannabe? Adventure awaits