How to use multiple hooks that depend on each other?

Example:

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.

[ebemunk]

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-danny]

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 = userDoc.data();

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

  return null;
};