3
votes

I have a Meteor/React application and am using the Meteor createContainer container method to collect data from Mongo and pass the results into a child component. I am finding that when any of the params change, the Mongo query re-computes (even though the params do not affect the Mongo query itself) and the props are sent onto the child component which causes it to re-render unecessarily. Is this the way createContainer is supposed to work, or should it simply just send down props only when the data that is returned by the query changes?

export default MyComponentContainer = createContainer(( params ) => {

    // Some Mongo queries...
    var query results = MyColl.find({}).fetch();

    return {
        query results  
    };

}, MyComponent);
1

1 Answers

1
votes

Yes, it will re-compute and its wrapped component will re-render when params change, because the params will be passed down to MyComponent, and React will re-render MyComponent because its props have changed.

If your results is a big array and you do not want to re-render results, I suggest you use another child component inside MyComponent to render results:

const ResultComponent = (props) => props.results.map(...);

const MyComponent = (props) => ({
  <div>
    <ResultComponent results={props.results} />
  </div>
});

This way ResultComponent will only re-render when results changes