title: How to consistently determine username with Meteor and React
body: <p>I have a simple meteor application with a component to show the username:</p>
  
  <pre class="lang-js prettyprint-override"><code>const Welcome = ({ isLoading, username }) =&gt; {
    if (isLoading) {
      return &lt;Loader /&gt;;
    } else {
      return &lt;div&gt;{username}&lt;/div&gt;;
    }
  };
  </code></pre>
  
  <p>I'm trying to pass the username in via</p>
  
  <pre class="lang-js prettyprint-override"><code>const WelcomeContainer = withTracker(() =&gt; {
    const isLoading = !Meteor.user() || Meteor.loggingIn();
    const username = Meteor.user() ? Meteor.user().username : '';
  
    return {
      isLoading,
      username,
    };
  })(Welcome);
  </code></pre>
  
  <p>If I navigate to the component normally, everything seems to work fine. However, if I refresh the page, about half the time it gets stuck on the loading component. (Notably, I'm using ReactRouter)</p>
  
  <p>What's more is the logs are quite similar: </p>
  
  <pre class="lang-js prettyprint-override"><code>console.log(`client: ${Meteor.isClient} and isLoading: ${isLoading}`);
  
  // Username displayed successfully
  client: true and isLoading: true (x2)
  client: true and isLoading: true (x2)
  client: true and isLoading: false (x2)
  
  // Stuck on Loading
  client: true and isLoading: true (x2)
  client: true and isLoading: false (x2)
  </code></pre>
  
  <p>Am I misunderstanding trackers? Do I need to subscribe to something here? How can I get the component to <strong>consistently</strong> display the username?</p>