Counter.js

import React from 'react';
import Coroutine from 'react-coroutine';
import Deferred from './Deferred.js';

export default Coroutine.create(Counter);

async function* Counter() {
  let counter = 0;
  while (true) {
    let event = new Deferred();
    yield (
      <section>
        <p>{counter}</p>
        <button onClick={() => event.resolve()}>Increment</button>
      </section>
    );
    await event.isResolved();
    counter++;
  }
}

Deferred.js

export default class Deferred {
  constructor() {
    this.resolve = null;
    this.promise = new Promise(resolve => {
      this.resolve = resolve;
    });
  }
  
  resolve(value) {
    this.resolve(value);
  }
  
  isResolved() {
    return this.promise;
  }
}