title: How to remember props state after page refreshes in React?
body: <p>I have a login page which then redirects to the dashboard if the user is authenticated.
  I passed down the email props to the dashboard using useContext which will call an api to retrieve user info and it displays the email name on the user nav bar. I also use express-session to remember the page sessions for the authentication.</p>
  
  <p>My problem is, if I were to refresh the page, the dashboard components renders perfectly except for the email on the nav bar since the initially the email props for the api was passed down from the login page, hence if refreshed, there would be no props.</p>
  
  <p>How do I reuse/store the state because I can't call the api if the email props is not remembered?</p>
  
  <p>I have tried using useReducer, useMemo but it still didn't work.</p>
  
  <p>Below are the codes</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import Routes from "./Routes";
  import { BrowserRouter as Router } from "react-router-dom";
  import AuthApi from "./utils/createContext";
  import { hasSignned, signin } from "./api/auth-api";
  
  
  function App() {
    const [auth, setAuth] = useState(false);
    const [email, setEmail] = useState();
    const [password, setPassword] = useState();
  
    const handleOnChange = (e) =&gt; {
      if (e.target.name === "email") {
        setEmail(e.target.value);
      } else {
        setPassword(e.target.value);
      }
    };
  
    const handleSignIn = async (e) =&gt; {
      e.preventDefault();
      const res = await signin({ email, password });
      if (res.data.auth) {
        setAuth(true);
      }
      //console.log(res);
    };
  
    const readSession = async () =&gt; {
      const result = await hasSignned();
      //result.data.auth
      const { data } = result;
      const { auth } = data;
      if (auth) {
        setAuth(true);
      }
      console.log(result);
    };
  
    useEffect(() =&gt; {
      readSession();
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
  
    return (
      &lt;AuthApi.Provider
        value={{
          auth,
          setAuth,
          handleOnChange,
          handleSignIn,
          email,
          password,
        }}
      &gt;
        &lt;Router&gt;
          &lt;Routes /&gt;
        &lt;/Router&gt;
      &lt;/AuthApi.Provider&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>Dashboard.js</p>
  
  <pre><code>import React, { useState, useContext, useEffect } from "react";
  import { makeStyles } from "@material-ui/core/styles";
  import CssBaseline from "@material-ui/core/CssBaseline";
  import AppBar from "@material-ui/core/AppBar";
  import Toolbar from "@material-ui/core/Toolbar";
  import Typography from "@material-ui/core/Typography";
  import IconButton from "@material-ui/core/IconButton";
  // import Badge from "@material-ui/core/Badge";
  import AccountCircleIcon from "@material-ui/icons/AccountCircle";
  // import NotificationsIcon from "@material-ui/icons/Notifications";
  import ToggleMenu from "./ToggleMenu";
  import axios from "axios";
  import AuthApi from "../utils/createContext";
  import TablePage from "../components/TablePage";
  import FormDialog from "./FormDialog";
  
  const useStyles = makeStyles((theme) =&gt; ({
    root: {
      display: "flex",
    },
    toolbar: {
      paddingRight: 24, // keep right padding when drawer closed
    },
    title: {
      flexGrow: 1,
    },
    appBarSpacer: theme.mixins.toolbar,
    content: {
      flexGrow: 1,
      height: "100vh",
      overflow: "auto",
    },
  }));
  
  export default function Dashboard() {
    const classes = useStyles();
  
    const { email } = useContext(AuthApi);
  
    const [userData, setUserData] = useState({});
  
    const readData = async () =&gt; {
      const result = await axios.post(`/auth/getemail/${email}`);
      console.log(result);
      // console.log(result.data.user[0]._id);
      const { data } = result;
      const { user } = data;
  
      let newCustomerData = {};
  
      user.forEach((cData) =&gt; {
        newCustomerData = {
          joindate: cData.word,
          email: cData.email,
          adminId: cData.adminId,
          _id: cData._id,
        };
      });
  
      console.log(newCustomerData);
      setUserData(newCustomerData);
    };
  
    useEffect(() =&gt; {
      readData();
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;CssBaseline /&gt;
        &lt;AppBar position="absolute"&gt;
          &lt;Toolbar className={classes.toolbar}&gt;
            &lt;Typography
              component="h1"
              variant="h6"
              color="inherit"
              noWrap
              className={classes.title}
            &gt;
              Dashboard
            &lt;/Typography&gt;
            &lt;AccountCircleIcon /&gt;
            &lt;Typography color="inherit" noWrap&gt;
              {userData.email}
            &lt;/Typography&gt;
            &lt;IconButton color="inherit"&gt;
              {/* &lt;Badge badgeContent={4} color="secondary"&gt;
                &lt;NotificationsIcon /&gt;
              &lt;/Badge&gt; */}
            &lt;/IconButton&gt;
            &lt;ToggleMenu /&gt;
          &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
        &lt;main className={classes.content}&gt;
          &lt;div className={classes.appBarSpacer} /&gt;
          &lt;TablePage /&gt;
          &lt;FormDialog /&gt;
        &lt;/main&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>