example.md

Controller

class StickySituation extends Control {
  remaining = 60;
  surname = "bond";

  didMount(){
    this.timer = 
      setInterval(() => {
        const remains = this.remaining -= 1
        if(remains == 0)
          cutTheDrama();
      }, 1000);
  }

  willUnmount(){
    this.cutTheDrama()
  }

  cutTheDrama(){
    clearInterval(this.timer);
  }

  getSomebodyElse(){
    fetch("https://randomuser.me/api/")
    .then(res => res.json())
    .then(data => data.results[0])
    .then(recruit => {
      this.surname = recruit.name.last
    })
  }
}

Component

const ActionSequence = () => {
  const { surname, remaining, getSomebodyElse } = StickySituation.use();

  if(agent.remaining == 0)
    return <h1>🙀💥</h1>

  return (
    <div>
      <div>Agent <b>{surname}</b> we need you to diffuse the bomb!</div>
      <div>
        If you can't diffuse it in {remaining} seconds, the cat may or may not die!
      </div>
      <div>
        But there is time! 
        <u onClick={getSomebodyElse}>
          Tap another agent
        </u> 
        if you think they can do it.
      </div>
    </div>
  )
}