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