Rendered more hooks than during the previous render.

const user = useUser();
const email = user.user?.emailAddresses?.[0]?.emailAddress;
const isAdmin = api.user.isAdmin.useQuery(email ?? '').data;
const user = useUser();
const email = user.user?.emailAddresses?.[0]?.emailAddress;
const isAdmin = api.user.isAdmin.useQuery(email ?? '').data;
Do you know how can I fix this?
Solution:
api.user.checkUser.useQuery(email ?? '', {
enabled: user.isSignedIn
});
api.user.checkUser.useQuery(email ?? '', {
enabled: user.isSignedIn
});
`...
Jump to solution
8 Replies
Neto
Neto2y ago
don't use hooks conditionally
// do not
if(something){
useSomeHook()
}
// do not
if(something){
useSomeHook()
}
react query allows you to "block" a query until something happens
yourny🤫🧏🏼
if (user.isSignedIn) { api.user.checkUser.useQuery(email ?? ''); }
if (user.isSignedIn) { api.user.checkUser.useQuery(email ?? ''); }
U mean something like this?
Neto
Neto2y ago
yeah, do not use something like that
yourny🤫🧏🏼
What can I do instead?
Solution
Neto
Neto2y ago
api.user.checkUser.useQuery(email ?? '', {
enabled: user.isSignedIn
});
api.user.checkUser.useQuery(email ?? '', {
enabled: user.isSignedIn
});
`
yourny🤫🧏🏼
Oh well, didn't know about that Really thanks
Neto
Neto2y ago
Dependent Queries | TanStack Query Docs
Dependent (or serial) queries depend on previous ones to finish before they can execute. To achieve this, it's as easy as using the enabled option to tell a query when it is ready to run:
crazyfilip13
crazyfilip132y ago
There is plugin for eslint https://www.npmjs.com/package/eslint-plugin-react-hooks if interested. One of rules from plugin checks for conditional use of hooks.
npm
eslint-plugin-react-hooks
ESLint rules for React Hooks. Latest version: 4.6.0, last published: 10 months ago. Start using eslint-plugin-react-hooks in your project by running npm i eslint-plugin-react-hooks. There are 7596 other projects in the npm registry using eslint-plugin-react-hooks.
Want results from more Discord servers?
Add your server