React state hook: I couldn't set state

Question

This is the code

import React, { useState } from 'react';
import firebase from 'firebase';

const GoogleAuth = () => {
  const [user, setUser] = useState({});
  const [isSignedIn, setIsSignedIn] = useState(null);
  var provider = new firebase.auth.GoogleAuthProvider();
  provider.addScope('https://www.googleapis.com/auth/userinfo.email');
  firebase.auth().useDeviceLanguage();

  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      setIsSignedIn(true);
    } else {
      setIsSignedIn(false)
    }
  });

  const login = () => {
    firebase.auth().signInWithPopup(provider).then(function(result) {
      // signed-in user info.
      setUser(result.user);
      setIsSignedIn(true);
    }).catch(function(error) {
      console.log(error);
    });
  }

  const logout = () => {
    firebase.auth().signOut().then(function() {
      console.log('logout success');
      setIsSignedIn(false);
    }).catch(function(error) {
      console.log('logout error');
    });
  }

  const renderButton = () => {
    if(isSignedIn === null) {
      return(
        <div>
          <div className="ui active inline loader"></div>
        </div>
      );
    } else if (isSignedIn) {
      return(
        <div className="ui negative basic animated button" tabIndex="" onClick={logout}>
          <div className="visible content">SignOut</div>
          <div className="hidden content">
            <i className="right google icon"></i>
          </div>
        </div>
      );
    } else {
      return(
        <div className="ui positive basic animated button" tabIndex="0" onClick={login}>
          <div className="visible  content">SignIn</div>
          <div className="hidden content">
            <i className="right google icon"></i>
          </div>
        </div>
      );
    }
  }
  return (
    <div>
      {renderButton()}
    </div>
  );
};

export default GoogleAuth;

I'm using Semantic UI for styles and firebase authentication.

The problem is I couldn't set the state of signedIn user to the user state. When I use setUser(result.user) inside login() function, the user state is still an empty object. But the login is successful and if I console log the result.user it gives out the logged in user object.

What am I doing wrong ? Why setUser() doesn't work here?

Have you confirmed that `result` parameter have the values you want to set? Use a console.log to check it out. — SILENT, Aug 16 '20 at 08:04
Are you using console.log to check if the state is set or not? If yes , then it may or may not show the state , because it is an async process . You can check if the state is updated or not using useEffect hook — Harmandeep Singh Kalsi, Aug 16 '20 at 08:04
I found out the problem. As @HarmandeepSinghKalsi stated, login is an async process. So the state was not updating right away and the `console.log(user)` was giving out the previous state. I used `useEffect()` to check and console log if the user state changes and it does. — Saran Raj, Aug 16 '20 at 08:24
```setState``` is async process @Saran Raj , just to correct . — Harmandeep Singh Kalsi, Aug 16 '20 at 08:38

score 1 · Answer 1 · answered Aug 16 '20 at 11:58

1

Assuming your result.user is an object now set it like this

setUser({...result.user});

It worked for me in some cases when directly setting state doesn't update.

answered Aug 16 '20 at 11:58

moshfiqrony

4,303
2
20
29

React state hook: I couldn't set state

1 Answers1