Cannot setState after receiving user from service provider

Question

I am receiving the user properly from my provider but for some reason the state does not change with the user object.

This returns the user object properly:

console.log(receivedUser);

However, after I try to do this, there's no object:

setUser(receivedUser);
  console.log(user);

What seems to be the issue here guys? Why doesn't the state change at all?

Full code:

const [user, setUser] = useState({})

// this prevents this providerValue changing unless value or setValue changes
const providerValue = useMemo(() => ({user, setUser}), [user, setUser])

  useEffect(() => {
    async function fetchUser(){
    const receivedUser = await AuthService.getCurrentUser();
    if (receivedUser) {
      // console.log(receivedUser);
      setUser(receivedUser);
      console.log(user);
    } else {
      console.log("user not logged in");
    }
    }
    fetchUser();
  }, []);

Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Patrick Roberts, Mar 17 '21 at 12:04

score 1 · Accepted Answer · answered Mar 17 '21 at 12:02

updation of state is asynchronous. you need to use useEffect to console out the value of state. A seperate useEffect can be created which would be triggered every time the user in the state changes

const [user, setUser] = useState({})

// this prevents this providerValue changing unless value or setValue changes
const providerValue = useMemo(() => ({user, setUser}), [user, setUser])

  useEffect(() => {
    async function fetchUser(){
    const receivedUser = await AuthService.getCurrentUser();
    if (receivedUser) {
      // console.log(receivedUser);
      setUser(receivedUser);
      console.log(user);
    } else {
      console.log("user not logged in");
    }
    }
    fetchUser();
  }, []);

    useEffect(()=> {
        console.log('user',user)
    }, [user])

score 0 · Answer 2 · answered Mar 17 '21 at 12:02

0

You can do it like that, first setUser is an async. You have to understand the life circle of useState

Will give you an example how to handle this right and wrong..

see below to example..

const [text, setText] = useState("default");


useEffect(() => {
  setText("test");

  console.log(text) // this will print defult
}, [])

useEffect(() => {
  console.log(text) // this will print test
}, [text])

answered Mar 17 '21 at 12:02

Alen.Toma

4,684
2
14
31

This sends 1 request per second and I don't want 1000 requests every second when I have users in the application, is there any other way to do this? – Harry Mar 17 '21 at 12:10
You say that but you still market @Erik Answer as the right answer? which is the same as mine:) – Alen.Toma Mar 17 '21 at 12:30

score 0 · Answer 3 · answered Mar 17 '21 at 12:03

setUser it's kind of asynchronous function. State of user doesn't change immediately after you call this function. If you want to handle when user state change add another on useEffect which checking if user state change:

useEffect( () => {
   /* this will be call any time user state change */
   if ( user ) {
       /* do something if user was fetched */
   }
}, [user])

Cannot setState after receiving user from service provider

3 Answers3