Theo's Typesafe Cult•2y ago

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•2y 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🤫🧏🏼•2y ago

  if (user.isSignedIn) { api.user.checkUser.useQuery(email ?? ''); }

  if (user.isSignedIn) { api.user.checkUser.useQuery(email ?? ''); }

U mean something like this?

Neto•2y ago

yeah, do not use something like that

yourny🤫🧏🏼•2y ago

What can I do instead?

Solution

Neto•2y ago

api.user.checkUser.useQuery(email ?? '', {
  enabled: user.isSignedIn
});

api.user.checkUser.useQuery(email ?? '', {
  enabled: user.isSignedIn
});

yourny🤫🧏🏼•2y ago

Oh well, didn't know about that Really thanks

Neto•2y ago

https://tanstack.com/query/v4/docs/react/guides/dependent-queries

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•2y 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.

Gaming

Programming

Rendered more hooks than during the previous render.