Error: Rendered more hooks than during the previous render.
https://i.imgur.com/9FCsFhb.png
Hey, im a noob currently and I get sometimes this error, but I dont know why. I googled and found some explanations but I dont get it tbh. Someone can explain me why this error occurs. ❤️
Solution:Jump to solution
You can't conditionally call hooks in that manner. If you want to call that useQuery hook only when you have a user, then you have to do something like this:
```
const { data: sessionData } = useSession();
...
5 Replies
Any sort of "use" should only every be used on the top level of the component. Since it's inside the if statement you are conditionally rendering a hook, which is illegal
This is explained in more detail on the react docs, which if you're learning react, that should be the first thing you read they explain why this is illegal and how to get around it there
Solution
You can't conditionally call hooks in that manner. If you want to call that useQuery hook only when you have a user, then you have to do something like this:
The first parameter to useQuery is the object with your parameters, and the second parameter is the condition on when to call it. If sessionData?.user !== null (probably could be shortened to sessionData?.user), then call your userQuery.
Make sense?
Makes Sense, but i get an Error that Sessiondata is a String and Not String || undefined
Try: sessionData?.user !== undefined
Or: sessionData?.user !== “”
got it, made them to components and used cond. rendering
thx!