title: useContext values gets cleared during page refresh and logout
body: <p>While updating the profile, <code>profile.name</code> gets displayed via <code>useContext()</code>in navlink (Navigation.js). But as soon as page gets refresh or during logout the profile.name gets cleared, also <code>profile.photo</code> is not displaying too in navlink.</p>
  
  <p>I want to display the name and photo always in nav link,  how can i do that. ? </p>
  
  <p><code>UserProfileProvider.js</code></p>
  
  <pre><code>import React, { useMemo, useState} from 'react';
  import UserProfileContext from '../context';
  
  const UserProfileProvider = ({children}) =&gt; {
  
      const [profile, setProfile] = useState({ _id: '', photo: '', name: '', email:'', phonenumber:'', position:'', privilege:'', password:''});
  
      const value = useMemo(() =&gt; ({
          profile, setProfile
      }), [profile]);
  
  
      return (
         &lt;UserProfileContext.Provider value={value}&gt;
             {children}
         &lt;/UserProfileContext.Provider&gt;
      )   
  }
  export default UserProfileProvider;
  </code></pre>
  
  <p><code>Navigation.js</code></p>
  
  <pre><code>import React, { useContext } from 'react';
  import { NavLink, useHistory } from 'react-router-dom';
  import UserProfileContext from '../context';
  
  
  const Navigation = () =&gt; {
      const history = useHistory();
      const {profile} = useContext(UserProfileContext); // added 16 jun based on stack
  
      const divStyle = {
          float:'left',
          color: '#64cad8', 
          padding: '0px 0px 0px 10px',
          font:'Lucida, sans-serif'
        };
  
      function logout() {
          localStorage.removeItem('loginEmail')
          localStorage.removeItem('Privilege')
          history.push('/login')
          window.location.reload(true);
        }
  
      return localStorage.getItem('loginEmail') &amp;&amp;
          &lt;div className="App"&gt;
              &lt;div className="wrapper"&gt;
                  &lt;div id="wrap"&gt;
                      &lt;nav className="siteNavigation_nav_links"&gt;
                      &lt;div className="clubLogo landing"style={divStyle}&gt;&lt;b&gt;Southside Soccer&lt;/b&gt;&lt;/div&gt;
                          &lt;NavLink className="mobile_register_link" to="/"&gt;Home&lt;/NavLink&gt;
                          &lt;NavLink className="mobile_register_link" to="/profile"&gt;Profile&lt;/NavLink&gt;
                          &lt;NavLink className="mobile_login_link" to="/login" onClick={logout}&gt;Logout&lt;/NavLink&gt;
                          &lt;NavLink className="mobile_login_link" to='/aboutus'&gt;About us&lt;/NavLink&gt;
                          &lt;span className="mobile_login_link"&gt;{profile.name}&lt;img className="nav_profile"src={profile.photo}&gt;&lt;/img&gt;&lt;/span&gt;
                      &lt;/nav&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  }
  
  export default Navigation;
  </code></pre>
  
  <p><code>App.js</code></p>
  
  <pre><code>import UserProfileProvider from './components/UserProfileProvider.js';
  
  var ReactDOM = require("react-dom");
  
  const App = () =&gt; {                       // added 16 jun based on stack
  
    return (
    &lt;BrowserRouter&gt;
      &lt;UserProfileProvider&gt;
            &lt;&gt;
          &lt;Navigation /&gt;
            &lt;Switch&gt;
                &lt;ProtectedRoute exact path="/" component={Home} /&gt;
                &lt;ProtectedRoute path="/profile" component={Profile} /&gt;
                &lt;ProtectedRoute path="/aboutus" component={Aboutus} /&gt;
                &lt;Route path="/register" component={Register} /&gt;
                &lt;Route path="/login" component={Login} /&gt;
                &lt;Route exact path="*" component={ErrorPage} /&gt;
            &lt;/Switch&gt;
            &lt;/&gt;
        &lt;/UserProfileProvider&gt;
     &lt;/BrowserRouter&gt;
    );
  };
  ReactDOM.render(
    React.createElement(App, null),
    document.getElementById("root")
  );
  
  export default App;
  </code></pre>
  
  <p><code>Profile.js</code></p>
  
  <pre><code>import React, {useContext, useEffect, useState } from "react";
  import UserProfileContext from '../context';
  
  const {profile, setProfile} = useContext(UserProfileContext);
  ...// rest of the Profile component code...
  </code></pre>