In this episode, we learn how to set up component-level subscriptions with React.

Here’s a simplified version of the subscription pattern shown in the video:

ProfilePage = React.createClass({

  mixins: [ReactMeteorData],

  getMeteorData() { // will re-run once the subscription is ready

    this.userProfileSub = Meteor.subscribe('userProfile', this.props.userId);
    return {
      user: Meteor.users.findOne(this.props.userId)
    }

  },

  render() { // if data is ready show profile component, else show loading component

    return this.data.user ? <Profile user={this.data.user} /> : <Loading />;

  }

});

You can learn more in this Kadira Academy article.

Stopping Subscriptions

In the video, I add some code to explicitly stop the subscription when the component is destroyed. As it turns out, this is not necessary since Meteor does it for you automatically.