Theo's Typesafe Cult•10mo ago

Handling Infinite Re-renders with useMutation in React Native and tRPC

Hi everyone, I'm working on a React Native project using tRPC for data fetching and mutations. I've encountered an issue where calling a mutation with useMutation from tRPC causes my LoginModal component to re-render infinitely. Here's a simplified version of my component:

import React, { useEffect } from 'react';
import auth from '@react-native-firebase/auth';
import { GoogleSignin } from '@react-native-google-signin/google-signin';
import { trpc } from '../../../../client/trpc';
import BaseModal from '../../Base/Modal/Modal';
import LoginButton from '../LoginButton/LoginButton';

export default function LoginModal({ modalController }) {
  const signin = trpc.user.signin.useMutation();

  useEffect(() => {
    const unsubscribe = auth().onAuthStateChanged(user => {
      if (!user) return;

      signin.mutate({
        accountID: user.uid,
        name: user.displayName,
      });
      console.log('signin mutation called');
      modalController.closeModal();
    });

    return () => unsubscribe();
  }, []);

  const handleLoginGoogle = async () => {
    // Google SignIn logic
  };

  return (
    <BaseModal controller={modalController}>
      {/* Modal content including LoginButton */}
    </BaseModal>
  );
}

import React, { useEffect } from 'react';
import auth from '@react-native-firebase/auth';
import { GoogleSignin } from '@react-native-google-signin/google-signin';
import { trpc } from '../../../../client/trpc';
import BaseModal from '../../Base/Modal/Modal';
import LoginButton from '../LoginButton/LoginButton';

export default function LoginModal({ modalController }) {
  const signin = trpc.user.signin.useMutation();

  useEffect(() => {
    const unsubscribe = auth().onAuthStateChanged(user => {
      if (!user) return;

      signin.mutate({
        accountID: user.uid,
        name: user.displayName,
      });
      console.log('signin mutation called');
      modalController.closeModal();
    });

    return () => unsubscribe();
  }, []);

  const handleLoginGoogle = async () => {
    // Google SignIn logic
  };

  return (
    <BaseModal controller={modalController}>
      {/* Modal content including LoginButton */}
    </BaseModal>
  );
}

The infinite re-rendering seems to occur after calling signin.mutate(). If I remove the mutate call, the issue disappears. I've tried various approaches to prevent this, including moving the mutation logic to a custom hook, but the problem persists. I suspect the re-rendering is triggered by the state update from the mutation result, but I'm not entirely sure why this leads to an infinite loop, nor how to effectively control or prevent it. Has anyone experienced similar issues with tRPC and useMutation causing infinite re-renders? How do you manage or prevent this from happening? Any advice or insights would be greatly appreciated. Thank you in advance for your help!

1 Reply

Vincent Udén•10mo ago

Well yes. Everytime you sign in it should probably trigger a change in the authentication state. Im just guessing but here we go. If the sign in succeeds the auth should contain a user since there is an active user when someone is signed in. That means your early return is not triggered and you attempt to sign in again. This will in turn result in the auth state changing again and so on Im not sure what it is you are trying to achieve here. What is the goal of this useEffect?

Gaming

Programming

Handling Infinite Re-renders with useMutation in React Native and tRPC