React getting an object from localStorage, can't set it with react useState

Question

I have the following code for App.js. The useEffect hook will run at startup of the App, and I expect it to retrieve an object from localStorage and then set it to the useState user variable.

CONSOLE.LOG OUTPUT:

JSON user {"name":"tester","username":"test username","password":"testpassword","token":"test token"}

parsed user {name: 'tester', username: 'test username', password: 'testpassword', token: 'test token'}

current logged in user: null

const App = (props) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // CHECK IF THERE IS A LOGGED IN USER FROM PREVIOUS SESSIONS
    const loggedUserJSON = window.localStorage.getItem("loggedInUser");
    if (loggedUserJSON) {
      console.log("JSON user", loggedUserJSON);
      const parsedUser = JSON.parse(loggedUserJSON);
      console.log("parsed user", parsedUser);
      setUser(parsedUser);
    }
    console.log("current logged in user: ", user);
  }, []);

And the following is the event handler for my login component:

  const login = async (event) => {
    event.preventDefault();
    try {
      const user = await UserService.login({
        username: username,
        password: password,
      });
      window.localStorage.setItem("loggedInUser", JSON.stringify(user));
      history.push("/home");
    } catch (exception) {
      console.log(exception);
    }
  };

Now I can see that the object goes into the browser's local storage correctly, and I can even properly parse it based on my console.log output. But somehow

setUser(parsedUser);

doesn't work. It gives the default value of null. What makes the setUser to fail?

there is a slight misunderstanding how the first code snippet works `setUser(parsedUser);` then in the same function logging out `user` won't work because the state hasn't actually been updated yet. you need to wait for the component to render again before trying to access the `user` state. if you just move `console.log("current logged in user: ", user);` to outside of the `useEffect` into the component body, it should fire twice and first it will log `null` then on render it will fire and should log your user — Tom Finney, Oct 28 '21 at 12:59

sojin · Answer 1 · 2021-10-28T13:10:10.920

setUser useState function will not instantly assign the value to user like user = parsedUser it is working different, it will only set your value in it next render,

check the answer in this link.

useState set method not reflecting change immediately

Solution

Either you can check the value on its next render, or you can check the change in one another useEffect

const App = (props) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // CHECK IF THERE IS A LOGGED IN USER FROM PREVIOUS SESSIONS
    const loggedUserJSON = window.localStorage.getItem("loggedInUser");
    if (loggedUserJSON) {
      console.log("JSON user", loggedUserJSON);
      const parsedUser = JSON.parse(loggedUserJSON);
      console.log("parsed user", parsedUser);
      setUser(parsedUser);
    }
    console.log("current logged in user: ", user); // this will only print null because `setUser(parsedUser)` is not yet reflected 
  }, []);
console.log("current logged in user on every render: ", user);  // this will console the value on its second render, becase second render happens when ` setUser(parsedUser);` completed
}

Another method to check the change is use one another useEffect

const App = (props) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // CHECK IF THERE IS A LOGGED IN USER FROM PREVIOUS SESSIONS
    const loggedUserJSON = window.localStorage.getItem("loggedInUser");
    if (loggedUserJSON) {
      console.log("JSON user", loggedUserJSON);
      const parsedUser = JSON.parse(loggedUserJSON);
      console.log("parsed user", parsedUser);
      setUser(parsedUser);
    }
    console.log("current logged in user: ", user); // this will only 
   print null becase `setUser(parsedUser)` is not yet reflected 
  }, []);
  useEffect(()=> {
     console.log("current logged in user on every render: ", user);  // this will console the value every time user value changes intially it will be null and on second time it will show your data
  },[user])
}

React getting an object from localStorage, can't set it with react useState

1 Answers1