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.
Download my free React Handbook and check out my React Course and my Next.js Course!
More react tutorials:
- Introduction to React Hooks
- How to debug a React application
- How to use the useRef React hook
- React Router, how to get data from a dynamic route
- Handling Forms in React
- Can I use React hooks inside a conditional?
- How to learn React
- React: Presentational vs Container Components
- React, focus an item in React when added to the DOM