Meteor / ReactJS - Problème de clignotement de l'interface utilisateur :rendu deux fois avant et après la vérification d'une base de données

Votre conteneur s'abonne aux données et surveille le ready de l'abonnement état :

createContainer(() => {
  const todosHandle = Meteor.subscribe('tasks');
  const loading = !todosHandle.ready();

  return {
    loading,
    tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
  };
}, App);

Cela signifie que votre composant recevra un booléen loading prop qui indique si les données sont disponibles ou non. Vous pouvez l'utiliser dans votre composant pour rendre un loading afficher pendant le chargement des données :

class App extends Component {
  //...
  render() {
    const {loading, tasks} = this.props;
    if (loading) {
      return (
        <div className="spinner">
          Loading...
        </div>
      );
    }
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>
          //...
      </div>
    );
  }
}

ou toute autre combinaison de composants qui dépend de l'état de chargement.

BTW, les tasks prop est un tableau, donc en utilisant tasks.length au lieu de Object.keys est probablement mieux.