google recaptcha React js

Question

I have a problem of the google recaptcha not rendering in the page at first however when i submit and the request sends me to another page and i return to the form page using arrow back on the browser it renders when i reload the page it no longer renders:

this is my index.html: <script src="https://www.google.com/recaptcha/api.js" async defer></script>

This is my component:

import React, { useState, useRef  } from "react";
import LogoBig from "../../../Assets/LogoBig.png";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import {
  validateEmail,
  validatePassword,
} from "../../../Components/FormValidation";
import { MdKeyboardArrowDown } from "react-icons/md";
import ReCAPTCHA from "react-google-recaptcha";

const UserRegister = () => {
  const [nom, setNom] = useState("");
  const [prenom, setPrenom] = useState("");
  ...
  const [recaptchaValue, setRecaptchaValue] = useState("");

  const handleRecaptcha = (value) => {
    console.log("reCAPTCHA value:", value);
    setRecaptchaValue(value);
  };

  const handleSubmit = async (e) => {
    if (e && typeof e.preventDefault === "function") {
      e.preventDefault();
      const token = recaptchaValue;
      console.log('tokenCaptcha', token)
      recaptchaValue.reset();
    }
    const formData = new URLSearchParams();
    formData.append("nom", nom);
    formData.append("prenom", prenom);
    ...
    formData.append("recaptcha", recaptchaValue);
    formData.append("profile", "Unfinished");

    fetch("http://localhost:5000/register", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: formData,
    })
      .then((res) => res.json())
      .then((data) => {
        if (data !== "Email already in use") {
          console.log("success");
          //window.location.reload();
          //window.location.href = "/confirmation";
        } else {
          if (data === "Email already in use") {
            setRegisterError("Cette adresse e-mail est déjà utilisée");
          } else {
            setError(data);
            console.log(error);
          }
        }
      });
  };
 
    <ReCAPTCHA
      sitekey={"6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"}
      onChange={handleRecaptcha}
              /> 

Answer 1

You should be use only one attribute on the <script> because when you use both attibutes async and defer the only one that works is defer by hierarchy.

Async is executed immediately after script is downloaded.

Defer is executed after HTML parsing is complete.

In your case, maybe you need use async alone.