3 replies

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!

TTC

Theo's Typesafe Cult•3y ago•

3 replies

KendrickMalar

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

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>
  );
}

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

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

Similar Threads

Similar Threads

Similar Threads