Script reloads on provider rerender if `scriptProps` prop is present

[nmalyarsky]

If the scriptProps prop is specified in a GoogleReCaptchaProvider, then a full cleanup/inject cycle will be initiated on each provider rerender, even if scriptProps object stays semantically the same. This is due to the nature of useEffect and object equality.

Issue is easily replicated using barebone Next.js app with routing and a custom App like this one:

import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <GoogleReCaptchaProvider scriptProps={{ async: true }} reCaptchaKey="KEY">
      <Component {...pageProps} />
    </GoogleReCaptchaProvider>
  )
}

export default MyApp

Each route change rerenders GoogleReCaptchaProvider, { async: true } object fails equality check and script reloads.

This behavior can be avoided by using a state variable in a consumer code. I'm also ready to open a PR in case you are willing to fix the issue in a library itself.

[johndanek]

"This behavior can be avoided by using a state variable in a consumer code." Do you have an example of this? I've run into the same issue and am a bit confused as to how to stop this frequent reloading.

[nmalyarsky]

Sure, using example above:

import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  const [scriptProps] = useState({ async: true })

  return (
    <GoogleReCaptchaProvider scriptProps={scriptProps} reCaptchaKey="KEY">
      <Component {...pageProps} />
    </GoogleReCaptchaProvider>
  )
}

export default MyApp

[johndanek]

@nmalyarsky Thank you!