Question about createContainer and Higher Order Components

To use Meteor data in a React component, the documents mention wrapping your root <App /> component using the following:

App.propTypes = {
  currentUser: PropTypes.object,
};

export default createContainer(() => {

  return {
    currentUser: Meteor.user(),
  };
}, App);

I have 2 questions:

  1. Can you wrap only your root <App/> container and use Meteor data in child components directly? If not directly, I assume passing data through props is the norm. Is this the preferred style used when structuring your application?
  2. Is it possible (or preferred) to separately wrap EVERY component that might need Meteor data (such as Meteor.user())? Is doing this preferred instead?

This article covers what we believe to be the best practices: https://guide.meteor.com/ui-ux.html

Basically you need to decide which components should be reusable (only accept data through props) and which should be “smart” (attached to meteor data via the container).

We usually load data at a few levels in the hierarchy, but not on every component.

2 Likes