Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use multiple hooks that depend on each other?

See original GitHub issue


const [authUser, authLoading, authError] = useAuthState(firebase.auth());
const [user, userLoading, userError] = useDocument(firebase.firestore().doc(`users/${authUser.uid}`));

I can’t put useDocument in a if (authUser) because React breaks with: Rendered more hooks than during the previous render.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5

github_iconTop GitHub Comments

ebemunkcommented, Nov 6, 2019

this is the pattern i use a lot, in a hook called useUser so I don’t duplicate it as much, basically looks like this

  const [auth, authLoading, authErr] = useAuthState(firebase.auth())
  const [data, dataLoading, dataErr] = useDocumentData(
    auth ? firebase.firestore().doc(`users/${auth.uid}`) : null,

i dont think useDocumentData(auth && firebase.firestore()...) usage is correct

its-dannycommented, Oct 21, 2019

I saw that, but I guess I’m kind of confused. What I have now is similar to that, I think? But I get: Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

const UpgradeButton: React.FC = () => {
  const toast = useToast();
  const [user, userLoading, userError] = useAuthState(firebase.auth());
  const [userDoc, userDocLoading, userDocError] = useDocument(user && firebase.firestore().doc(`users/${user.uid}`));

  if (userLoading || userDocLoading) {
    return null;

  if (userError) {
    toast(getErrorToastConfig("Unable to sign in."));

    return null;

  if (userDocError) {
    toast(getErrorToastConfig("Unable to get user data."));

    return null;

  if (userDoc) {
    const userData =;

    if (userData && userData.basic) {
      return <Button size="sm">Upgrade</Button>;

  return null;

Read more comments on GitHub >

github_iconTop Results From Across the Web

React hooks and their dependence on each other
You can add more states and effects to this components and chain them using this method so they don't clash with each other....
Read more >
Rules of Hooks - React
They let you use state and other React features without writing a class. Hooks are JavaScript functions, but you need to follow two...
Read more >
React component with two dependent useEffect hooks
externalRequest(0, newFilters). What I'd consider to be a workaround is either to store the page as a mutable reference as follows:
Read more >
React hooks... Oops! Part 2 - why does my effect run multiple ...
fn is the effectful function, and deps is an array of values it depends on. Every time the component renders, React checks if...
Read more >
React hooks: how to use useState and useReducer effectively?
In this article we will discover two hooks, the basic one useState, ... all begin with a three-letter 'use', but with different functionality...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found