React code duplication?


I’m new to Meteor and currently trying to understand if I should use Blaze or React going forward. One thing that buggers me about the React solution is that it seems I have to do massive amounts of code duplication, or I might just be missing something.

According to the docs, basically every my component would have something like this code:

import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import React from 'react';

import { Lists } from '/imports/api/lists.js';

export default class ListPage extends React.Component {
  render() {

    if (loading) {
      return (
        <Card fluid>
            <Loader active />

    return (


ListPage.propTypes = {
  list: React.PropTypes.object,
  todos: React.PropTypes.array,
  loading: React.PropTypes.bool,
  listExists: React.PropTypes.bool,

export default ListPageContainer = withTracker(({ id }) => {
  const todosHandle = Meteor.subscribe('todos.inList', id);
  const loading = !todosHandle.ready();
  const list = Lists.findOne(id);
  const listExists = !loading && !!list;
  return {
    todos: listExists ? list.todos().fetch() : [],

which strikes me as odd. Is there no better way to do this in a centralized way? Shouldn’t I be able to say somewhere (e.g. router definition or such) “hey, on this page I need these subscriptions and also on every page show a loader until all subscriptions are ready” ?

What obvious thing am I missing?


Sure, just include the loading check in the top level component and leave it out of all of it’s children.
Only render the children when the data is ready


Have a look at pup by @themeteorchef - covers a lot of how to strucutre the boilerplate nicely for a spa.


where in pup can I find the solution to my question? I’ve looked at pup but it’s overwhelming at first.


Thanks for sharing! @00tom, you can find Pup here: and the docs here