title: React global objects & events
body: <p>I'm new to React and still having some trouble "thinking in react" when it comes to global events &amp; scope. </p>
  
  <p>My goal is to maintain some global data about the "session" like whether a user is logged-in and their identity. </p>
  
  <p><strong>My main container looks like this:</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import { Link, Route, Switch } from 'react-router-dom';
  
  import Header from './Header';
  import Routes from "./Routes";
  
  class App extends Component {
      render() {
          return (
              &lt;div className="parent-container"&gt;
                  &lt;Header /&gt;
                  &lt;Content /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  class Content extends Component {
      constructor(props) {
          super(props);
      }
  
      render() {
          return (
              &lt;div className="content" &gt;
                  &lt;Routes /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default App;
  </code></pre>
  
  <p><code>&lt;Header /&gt;</code> is simply a nav bar with a title &amp; links.</p>
  
  <p><code>&lt;Routes /&gt;</code> is a <code>react-router</code> which looks like this:</p>
  
  <pre><code>import React from "react";
  import { BrowserRouter, Route } from 'react-router-dom';
  
  import HomeView from "../presentational/_Views/HomeView";
  import LoginView from "../presentational/_Views/LoginView";
  import CreateUserView from "../presentational/_Views/CreateUserView";
  import TestView from "../presentational/_Views/TestView";
  
  const Routes = () =&gt; (
      &lt;div&gt;                
          &lt;Route exact path="/" component={HomeView} /&gt;
          &lt;Route path="/login" component={LoginView} /&gt;
          &lt;Route path="/test" component={TestView} /&gt;
          &lt;Route path="/create" component={CreateUserView} /&gt;
      &lt;/div&gt;
  )
  
  export default Routes;
  </code></pre>
  
  <p>Each route loads a "presentational" view component that contains child components for that particular view (Login view component imports a LoginForm component etc). </p>
  
  <p>Whenever my app is hard-loaded (or reloaded) I would like the following logic to be fired (pseudo-code):</p>
  
  <pre><code>if session_token exists:
      - make a call to API
      - verify session
      - store a global session object containing session data
  </code></pre>
  
  <p>I figured I can do something like this in a <code>componentWillMount()</code> function on the <code>App</code> component...</p>
  
  <pre><code>//...
  class App extends Component {
      componentWillMount(){
          if(token &amp;&amp; valid(token)){
              // store the user session in an object containing token, user-role, etc.
          }
      }
  
      render() {
  //....
  </code></pre>
  
  <p>..but this seems like a bad design. </p>
  
  <p>The other part to this is to:</p>
  
  <ol>
  <li>show/hide navbar links based on whether a user is logged in (show "login" link if not logged in, show "log out" link is logged in)</li>
  <li>check authentication on state change before the view is rendered. </li>
  </ol>
  
  <p>The above two is where I wanna go for context but focusing only on the main issue here just to wrap my head around it. </p>
  
  <p>How is something like this done "the React way"?</p>