CODEWITHSUNDEEP
javascriptreactjs
Sean Holloway
Sean Holloway

Reputation: 23

React.js localStorage not causing correct re-render

I am trying to implement a simple "remember me" option for a login system in a React app. According to the console, it seems like everything should be working correctly. However, the rendered output continues to show the login screen. Here is my code:

import React, { useState } from 'react';
import Login from '../Login/Login';
import GroupList from '../GroupList/GroupList';

// Flag to avoid infinite loop
let checkedLogin = false;
function App(props) {

  // State hooks
  const [isLoggedIn, setLoggedIn] = useState(false);
  const [userID, setUserID] = useState(null);

  // Load from session storage
  if("userID" in localStorage && !checkedLogin) {
    let newUserID = parseInt(localStorage.getItem("userID"));
    checkedLogin = true;
    loginComplete(newUserID);
  }

  // Callback function for login to update main app
  function loginComplete(newUserID) {

    // Set state variables
    setLoggedIn(true);
    setUserID(newUserID);

    // Save to localStorage
    localStorage.setItem('userID', JSON.stringify(newUserID));
  }


  console.log(userID);
  console.log(isLoggedIn);

  // JSX return
  if(isLoggedIn) {
    return <GroupList 
      API_ROUTE={props.API_ROUTE} 
      userID={userID}
      />

  }else{
    return <Login 
      API_ROUTE={props.API_ROUTE} 
      loginCallback={loginComplete}
      />
  }
}

export default App;

And here is what the console is returning:

enter image description here

If anyone has any advice, it is much appreciated. Thank you.

Upvotes: 1

Views: 886

Answers (1)

Rahul Sharma
Rahul Sharma

Reputation: 10111

Try wrapping inside useEffect. and no need to create another variable checkedLogin you can use isLoggedIn only.

  useEffect(() => {
    // Load from session storage
    if ("userID" in localStorage && !checkedLogin) {
      let newUserID = parseInt(localStorage.getItem("userID"));
      checkedLogin = true;
      loginComplete(newUserID);
    }
  }, [newUserID]);

Upvotes: 1

Related Questions