react-oauth icon indicating copy to clipboard operation
react-oauth copied to clipboard

useGoogleLogin rerenders my component twice

Open dominx99 opened this issue 1 year ago • 0 comments

I encountered odd behavior regarding the useGoogleLogin hook because only having it in my component makes it render twice.

I got a simple example:

import { Button } from "@mui/joy";
import { useGoogleLogin } from "@react-oauth/google";

export const GoogleRegisterButton = () => {
  console.log('render GoogleRegisterButton');

  const registerWithGoogle = useGoogleLogin({
    scope: 'openid email profile',
    flow: 'auth-code',
    onSuccess: res => console.log(res.code),
  });

  return (
    <Button
      onClick={registerWithGoogle}
    >
      Register with google
    </Button>
  )
}

In the console render GoogleRegisterButton appears twice.

Do you know if that is necessary for this hook? when I want to call my backend service onSuccess there are two API calls.

Without this hook, there is only one message: render GoogleRegisterButton

dominx99 avatar Jun 30 '24 19:06 dominx99