title: React - what is the proper way to do global state?
body: <p>I have here an app, and I want the App component to hold the current logged in user. I have the following routes and components.</p>
  <p>Basically, every component in my app will make use of the user object. Sure I can pass the user as props to each and every component, but that is not elegant. What is the proper React way of sharing the user prop globally?</p>
  <pre class="lang-js prettyprint-override"><code>const App = () =&gt; {
      const [user, setUser] = useState(null);
  
      return (
          &lt;Router&gt;
              &lt;div className=&quot;app&quot;&gt;
                  &lt;Topbar /&gt;
                  &lt;Switch&gt;
                      &lt;Route path=&quot;/login&quot; exact component={Login} /&gt;
                      &lt;Route path=&quot;/home&quot; exact component={Home} /&gt;
                      &lt;Route path=&quot;/&quot; exact component={ShopMenu} /&gt;
                      &lt;Route path=&quot;/orders&quot;&gt;
                          &lt;Orders /&gt;
                      &lt;/Route&gt;
                      &lt;Route path=&quot;/wishlist&quot; exact component={Wishlist} /&gt;
                      &lt;Route path=&quot;/wallet&quot; exact component={Wallet} /&gt;
                      &lt;Route path=&quot;/cart&quot; exact component={Cart} /&gt;
                  &lt;/Switch&gt;
                  &lt;BottomBar /&gt;
              &lt;/div&gt;
          &lt;/Router&gt;
      );
  };
  </code></pre>