https://twitter.com/alecdotbiz/status/1176189264096321538

app.tsx

import { createHook } from './createHook'

class App {
  count = 0
  increaseCount() {
    this.count++
  }
  decreaseCount() {
    this.count--
  }
}

const useApp = createHook(new App())

function App() {
  const app = useApp()
  
  return (
    <div className="App">
      <h1>{app.count}</h1>
      <button onClick={app.decreaseCount}>decrease</button>
      <button onClick={app.increaseCount}>increase</button>
    </div>
  )
}

// TODO: call "ReactDOM.render"

createHook.ts

import { useEffect } from 'react'
import { Auto } from '../auto'
import { useConstant, useDispose, useForceUpdate } from './common'

export function createHook<T extends object>(app: T) {
  return function useApp() {
    const onDirty = useForceUpdate()
    const auto = useConstant(() => new Auto({ lazy: true, onDirty }))
    useDispose(() => auto.dispose())
    useEffect(() => {
      if (!auto.commit()) onDirty()
    })
    return auto.wrap(app, true)
  }
}