what does createContainer in Meteor using React do?

Question

I'm working on the Meteor using React tutorial and trying to understand createContainer(). From reading here:

http://guide.meteor.com/v1.3/react.html#using-createContainer

I think that its a function defined in meteor/react-meteor-data that is used for data loading. In this specific case, it retrieving data from the Mini Mongo Database (named Task here). My question is, what does the second argument to createContainer do? (named App here). Thank you!

class App extends Component {
   //...class definition
}

 export default createContainer(() => {
  return {
    //Tasks is a Mongo.Collection
    //returns the matching rows (documents)
    //here we define the value for tasks member
    tasks: Tasks.find({}, { sort: { createdAt: -1} }).fetch(),
  };
}, App);

Answer 1

A component created with createContainer is a simple wrapper around your actual component, but it's powerful in that it handles Meteor's reactivity for you so you don't have to think about how to keep your everything up to date when your data changes (e.g. a subscription loads, ReactiveVar / Session var changes)

A React component is basically just a JavaScript function, it is called with a bunch of arguments (props) and it produces an output. React doesn't know if your data has changed unless you tell it so. The component created with createContainer will re-render when your reactive data changes and send a new set of props to your actual component.

The options for createContainer are a function that returns the reactive data you want, and the component you want to wrap. It's really simple, and the render function for createContainer is literally one line:

return <Component {...this.props} {...this.data} />;

It passes through any props you pass to the wrapped component, plus it adds the reactive data source you set up.

You can see the code for yourself here: https://github.com/meteor/react-packages/blob/devel/packages/react-meteor-data/createContainer.jsx

The <Component {...this.props} syntax is known as a splat and basically turns:

{
    prop1: 'some value',
    prop2: 'another value'
}

into:

<Component prop1='some value' prop2='another value />

(See: https://facebook.github.io/react/docs/jsx-spread.html)

Answer 2

Asking a coworker, this is the answer that I got:

createContainer's second argument is the class name that you want the data to be encapsulated in. It will then have "reactive data" because every time the data in the DB is changed, the class's props will change to include the new data.

Also, the createContainer() function should be called outside of the class definition.

If anyone has anything to add please feel free to contribute.