React with MVC - https://codepen.io/lijunle/pen/BZbZaq

App.tsx

/** @file App.tsx */
class App extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      mount: true
    };
  }

  render() {
    return (
      <div>
        {
          this.state.mount && (
            <MVC
              model={{ count: 0 }}
              view={MyView}
              controller={MyController}
            />
          )
        }
        <button onClick={() => this.setState({ mount: true })}>
          Mount
        </button>
        <button onClick={() => this.setState({ mount: false })}>
          Unmount
        </button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById(('app')))

BaseCollection.ts

/** @file BaseCollection.ts */
class BaseController<T> {
  protected setState: (callback: (prevState: T) => T) => void;

  constructor(setState) {
    this.setState = setState;
  }
}

MVC.ts

/** @file MVC.ts */
interface IMVCProps<TModel, TView, TController> {
  model: TModel;
  view: TView;
  controller: TController;
}

class MVC<TModel, TView, TController>
  extends React.PureComponent<IMVCProps<TModel, TView, TController>, TModel> {

  private mounted = false;

  constructor(props) {
    super(props);

    this.state = props.model;

    const setState = this.setState;
    this.setState = (prevState) => {
      if (this.mounted) {
        setState.call(this, prevState);
      }
    }

    this.controller = new (props.controller)(this.setState);
    Object.getOwnPropertyNames(Object.getPrototypeOf(this.controller)).forEach((key) => {
      if (key === 'constructor') { return; }
      this.controller[key] = this.controller[key].bind(this.controller);
    });
  }

  componentDidMount() {
    this.mounted = true;
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  render() {
    return React.createElement(this.props.view, {
      controller: this.controller,
      ...this.state
    })
  }
}

MyController.ts

/** @file MyController.ts */
class MyController extends BaseController<MyModel> {
  public inc(step: number) {
    return () => this.setState(state => ({ count: state.count + step }));
  }

  public dec() {
    this.setState(state => ({ count: state.count - 1 }));
  }

  public deferInc() {
    setTimeout(() => {
      this.setState(state => ({ count: state.count + 10 }))
    }, 1000)
  }

  public deferDec() {
    setTimeout(() => {
      this.setState(state => ({ count: state.count - 10 }))
    }, 3000)
  }
}

MyModel.ts

/** @file MyModel.ts */
interface MyModel {
  count: number;
}

MyView.tsx

/** @file MyView.tsx */
const MyView = ({ controller, count }: MyModel & { controller: MyController }) => {
  return (
    <div>
      <button onClick={controller.inc(1)}>Inc</button>
      <button onClick={controller.deferInc}>Defer Inc</button>
      <div>{count}</div>
      <button onClick={controller.dec}>Dec</button>
      <button onClick={controller.deferDec}>Defer Dec</button>
    </div>
  )
}