What is the right way to use onAuthStateChange function in firebase, to send the new token to backend since token expires every hour in firebase

Question

I'm working on a react-firebase project, where i send token to backend to authenticate the user, but after one hour I need to refresh the page to authenticate the same user because of expiry of refresh tokens.

  useEffect(() => {
    auth.onAuthStateChanged((result) => {
      if (result) {
        console.log("user", result)
        console.log("location", location.pathname)
        var token = result.accessToken;
        const displayName = result.displayName;
        const email = result.email;
        const photoURL = result.photoURL;
        const phoneNumber = result.phoneNumber;
        const uid = result.uid;

        const user = { displayName, email, photoURL, phoneNumber, uid }
        createUserDocument(user);

        localStorage.setItem("name", displayName);
        localStorage.setItem("email", email);
        localStorage.setItem("phoneNumber", phoneNumber);
        localStorage.setItem("auth", true);
        localStorage.setItem("token", token);
        localStorage.setItem("photoURL", photoURL);
        setPhotoUrl(photoURL)
        dispatch({ type: UPDATE_USER, payload: user })
      }
    })
  }, [])

Here in the above code I've used that code inside the componentdidmount, where authentication happens only once, but if I remove those bracket and use componentDidUpdate, then it'll be a performance concern. How to resolve this kind of issue.