title: Sharing global/singleton data in react app
body: <p>I'm rewriting a small app to try and better understand React. I'm trying to determine the "correct"/most efficient method of sharing "singleton" data - for example, a user who's been properly authenticated upon login.</p>
  
  <p>Right now the parent "application" component has a <code>user</code> property in its state, which I pass to child components as a prop:</p>
  
  <pre><code>&lt;Toolbar user={this.state.user} /&gt;
  &lt;RouteHandler user={this.state.user}/&gt;
  </code></pre>
  
  <p>(I'm using react-router). This works, and in read-only cases like this, isn't terrible. However, my actual login form component (which is a route, and would be inside <code>RouteHandler</code>), needs some way to "set" the new user data, so I also need to pass in some callback:</p>
  
  <pre><code>&lt;RouteHandler onAuthenticated={this.setUser} user={this.state.user}/&gt;
  </code></pre>
  
  <p>Not a big problem, except for the fact that now this method is available to every "route" handled by <code>RouteHandler</code>. </p>
  
  <p>I've been reading up and it seems like the only alternative is an <code>EventEmitter</code> or <code>Dispatch</code>-style system. </p>
  
  <p>Is there a better way I'm missing? Is an event emitter/dispatcher system worth using when there's really only one or two uses in an app this small?</p>