CODEWITHSUNDEEP
meteormeteor-accounts
cnorris
cnorris

Reputation: 548

How to consistently determine username with Meteor and React

I have a simple meteor application with a component to show the username:

const Welcome = ({ isLoading, username }) => {
  if (isLoading) {
    return <Loader />;
  } else {
    return <div>{username}</div>;
  }
};

I'm trying to pass the username in via

const WelcomeContainer = withTracker(() => {
  const isLoading = !Meteor.user() || Meteor.loggingIn();
  const username = Meteor.user() ? Meteor.user().username : '';

  return {
    isLoading,
    username,
  };
})(Welcome);

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)

What's more is the logs are quite similar: 

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)

Am I misunderstanding trackers? Do I need to subscribe to something here? How can I get the component to consistently display the username?

Upvotes: 0

Views: 31

Answers (1)

cnorris
cnorris

Reputation: 548

The problem was I had <React.StrictMode>. Removing this resoles the issue.

Upvotes: 0

Related Questions