title: React doesn't call useEffect on firebase (v9) auth update
body: <p>I'm uploading a user profile image into firebase storage, then updating the <code>photoURL</code> value of the auth user with <code>updateProfile()</code>. After that I want the user to be updated without manually refreshing the page. I've been trying this for days now and the issue gets more weird every time I try to debug it.</p>
  <p>The interesting thing is the user object seems to be already updated when I log it with <code>console.log(currentUser)</code> after the <code>then</code> promise of <code>updateProfile()</code> is fulfilled. So the new photoURL is already present in the <code>currentUser</code> object. But it seems to not call a state update or <code>console.log(&quot;!!!!currentAuthUserUpdate&quot;, user);</code>. So the user image wouldn't refresh in my page.</p>
  <p>I even tried it with doing a useEffect with the currentUser as a dependency but it wasn't fired. Still, the <code>currentUser</code> object changed when logging it after <code>updateProfile()</code></p>
  <p>Updating the profile, <strong>UpdateUserImage.tsx</strong>:</p>
  <pre><code>import { useAuth } from &quot;../../contexts/AuthContext&quot;;
  
  const { currentUser } = useAuth();
  
  // updating the user profile
  updateProfile(currentUser, { photoURL })
  </code></pre>
  <p><strong>AuthContext.tsx</strong>:</p>
  <pre><code>import { auth } from &quot;./../firebase/firebase&quot;;
  
  const [currentUser, setCurrentUser] = useState(null);
  
  const auth = getAuth(app);
  
    useEffect(() =&gt; {
      const unsubscribe = auth.onAuthStateChanged((user) =&gt; {
        console.log(&quot;!!!!currentAuthUserUpdate&quot;, user);
  
        // I tried setting the user as a custom new object: const userData = { ...user };
        setCurrentUser(user);
      });
      return unsubscribe;
    }, []);
  </code></pre>
  <p><strong>firebase.js</strong></p>
  <pre><code>import { getAuth } from &quot;firebase/auth&quot;;
  
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  
  export {
    auth
  };
  </code></pre>
  <p><strong>What I tried additionally:</strong> (But this wouldn't work as the user is already updated without a state refresh from react, so it's trying to replace the same object)</p>
  <pre><code>const reloadUser = async () =&gt; {
      try {
        const res = await currentUser.reload();
        const user = auth.currentUser;
        console.log(&quot;currentUser:&quot;, user);
  
        setCurrentUser(auth.currentUser);
  
        console.log(&quot;res&quot;, res);
      } catch (err) {
        console.log(err);
      }
    };
  </code></pre>