Бесконечная прокрутка Meteor React: остановить обновление компонента

Question

Я использую Метеор с React. У меня есть компонент, который обернут в реагирующий композитор, чтобы подписаться на мои данные. Я установил ограничение на публикацию на сервере равным 10 и увеличивал его каждый раз, когда пользователь нажимает кнопку еще на 10.

Проблема в том, что вместо добавления только 10 новых элементов в представление, кажется, обновляются целые компоненты. Как я могу реактивно перезагрузить только дополнительные данные без полного обновления страницы?

---

В принципе, я использую javascript, чтобы определить, когда пользователь достиг нижней части страницы, и затем запустить функцию в родительском компоненте, чтобы изменить предельное состояние моего LocationList, которое затем инициирует публикацию сервера для загрузки большего количества местоположений.

Сервер /Publication.js

Meteor.publish("Locations", function(settings) {
  check(settings, Object);
  ReactiveAggregate(this, Locations, [
    { $limit: settings.limit },
    { $project: {
      name: '$name',
    }},
  ]);
});

клиент /LocationList.jsx

class LocationList extends React.Component {
  constructor(props) {
    super(props);

    this.handleScroll = this.handleScroll.bind(this);
  }

  handleScroll() {
    const windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
    const body = document.body;
    const html = document.documentElement;
    const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight,  html.scrollHeight, html.offsetHeight);
    const windowBottom = windowHeight + window.pageYOffset;
    if (windowBottom >= docHeight - 100) {
      // bottom reached
      this.props.onLoadMore();
    } else {
      // not bottom
    }
  }

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  render() {
     ... something
  }
}

function composer(props, onData) {
  const settings = {
    limit: props.limit,
  };

  const locationSubscription = Meteor.subscribe('Locations', settings);

  if(locationSubscription.ready()) {
    locations = Locations.find({}, {limit: props.limit}).fetch();

    const data = {
      ready: true,
      locations: locations,
    }
    onData(null, data);
  } else {
    onData(null, {ready: false});
  }
}

const options = {
  loadingHandler: () => (<p>Loading... </p>)
};

export default composeWithTracker(composer, options)(LocationList);

клиент /LocationListLoader.jsx

export default class LocationListLoader extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      limit: 9
    };

    this.loadMore = this.loadMore.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if(this.props.category != nextProps.category) {
      this.setState({ limit: 9 });
    }
  }

  loadMore() {
    const newLimit = this.state.limit + 6;
    this.setState({ limit: newLimit });

  }

  render() {
    return (
      <LocationList onLoadMore={this.loadMore} limit={this.state.limit} />
    )
  }
}