CODEWITHSUNDEEP
javascriptreactjslocal-storage
demiglace
demiglace

Reputation: 753

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

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?

Upvotes: 0

Views: 1032

Answers (1)

Sojin Antony
Sojin Antony

Reputation: 2217

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])
}

Upvotes: 2

Related Questions