title: I can't re-render app.js on login/logout from child component
body: <p>I can't find a solution on how to re-render app.js function.
  It's loaded first time, but when I click login or logout button I need to call a function from the helper again to check user status.
  App.js</p>
  <pre><code>import Routes from &quot;./Routes&quot;;
  
  import NavBar from &quot;./common/navBar&quot;;
  import { isAuthenticated } from &quot;./helpers/checkAuthentication&quot;;
  
  
  function App() {
    useEffect(() =&gt; {
      {
        console.log(&quot;useEffect&quot;, isAuthenticated());
      }
    });
    return (
      &lt;&gt;
        {console.log(&quot;INININ&quot;, isAuthenticated())}
        &lt;div
          className={
            isAuthenticated()
              ? &quot;loggedIn internalDashboard&quot;
              : &quot;loggedOut internalDashboard&quot;
          }&gt;
          {isAuthenticated() ? (
            &lt;div className='menu'&gt;
              &lt;NavBar /&gt;
            &lt;/div&gt;
          ) : null}
  
          &lt;div className='mainContent'&gt;
            &lt;Routes /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Login.jsx</p>
  <pre><code>import { Form, Input, Button } from &quot;antd&quot;;
  import { useHistory } from &quot;react-router&quot;;
  const Login = () =&gt; {
    const history = useHistory();
    const [, forceRender] = useReducer((s) =&gt; s + 1, 0);
    const onFinish = (values) =&gt; {
      console.log(&quot;Success:&quot;, values);
      const userInfo = {
        email: values.email
      };
      localStorage.setItem(&quot;user&quot;, JSON.stringify(userInfo));
      history.push(&quot;/&quot;);
    };
  
    useEffect(() =&gt; {
      let user = localStorage.getItem(&quot;user&quot;);
      console.log(&quot;IN&quot;);
      if (user) {
        localStorage.removeItem(&quot;user&quot;);
        history.push(&quot;/&quot;);
      }
    });
  
    return (
      &lt;Form
        name='basic'
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}&gt;
        &lt;Form.Item
          label='Username'
          name='email'
          rules={[{ required: true, message: &quot;Please input your email!&quot; }]}&gt;
          &lt;Input /&gt;
        &lt;/Form.Item&gt;
  
        &lt;Form.Item
          label='Password'
          name='password'
          rules={[{ required: true, message: &quot;Please input your password!&quot; }]}&gt;
          &lt;Input.Password /&gt;
        &lt;/Form.Item&gt;
  
        &lt;Form.Item&gt;
          &lt;Button type='primary' htmlType='submit'&gt;
            Submit
          &lt;/Button&gt;
        &lt;/Form.Item&gt;
      &lt;/Form&gt;
    );
  };
  export default Login;
  </code></pre>
  <p>In console.log:
  INININ true
  navBar.jsx:66 dsadsadsddasadsa true
  App.js:11 useEffect true</p>
  <p>This part will be loaded only first time on pageload, after that I need to reload page to see new status</p>
  <p>On lick login button localstorage will receive new data, but app.js will not check authentication and show <code>&lt;NavBar /&gt;</code>. And if I click logout user will be removed from localstorage but I can see <code>&lt;NavBar /&gt;</code>, and I need to refresh page and everything works fine</p>