React Component Mount, Wait for Subscriptions Ready?


#1

Hey everyone!

Is there a recommended pattern to have a React component’s mounting operation wait for the component’s subscription’s to be ready before actually mounting?

Thanks.


#2

You can’t really control when the component mounts, but you can control what’s displayed based on if the subscription is ready or not.

MyComponent = React.createClass({
  mixins: [ReactMeteorData],
  
  getMeteorData() {
    const handle = Meteor.subscribe('things');
    
    return {
      ready: handle.ready(),
      things: Things.find()
    }
  },
  
  render() {
    if (!this.data.ready) {
      return <div>Loading...</div>
    }
    
    return <div>
      I've got data!
    </div>
  }
});

#3

Hi, I’m using universe:utilities-react instead of ReactMeteorData. And it works pretty well. You could take a look at the their Subscription mixin.


#4

Had no idea that existed… does that reactively update state in React? seems awesome.


#5

The behavior is the same as getMeteorData, so answer is yes.