10 replies

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.

Imgur

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();

const data = api.example.getUserGuilds.useQuery({
    userId: sessionData.user.id,
}, sessionData?.user !== null);

const { data: sessionData } = useSession();

const data = api.example.getUserGuilds.useQuery({
    userId: sessionData.user.id,
}, sessionData?.user !== null);

const { data: sessionData } = useSession();

const data = api.example.getUserGuilds.useQuery({
    userId: sessionData.user.id,
}, sessionData?.user !== null);

const { data: sessionData } = useSession();

const data = api.example.getUserGuilds.useQuery({
    userId: sessionData.user.id,
}, sessionData?.user !== null);

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?

Jump to solution

Error: Rendered more hooks than during the previous render.

Similar Threads

Similar Threads

Similar Threads