Model.use

namespace Model {
  function use <T extends Model> (this: Model.New<T>, apply?: Model.Values<T>, repeat?: boolean): T;
  function use <T extends Model> (this: Model.New<T>, callback?: (instance: T) => void): T;
}

This method is a React hook which instantiates a new instance of this and memoizes it for a given component. In addition, it observes properties accessed during the first render, and refreshes accordingly.

class Control extends Model {
  number = 0;
 
  up = () => this.current++;
}
 
const Component = () => {
  const { number, up } = Control.use();
 
  return (
    <div onClick={up}>
      Current number is {number}.
    </div>
  )
};

If number changes for any reason, assignment will trigger a re-render.

Automatic Subscription

Under the hood, this method is aware of properties accessed and will subscribe to them automatically. This is done by wrapping control in this instance, with a proxy specific to the mounted component. It will keep track of properties used, and when overlapping updates occur, the component will stay in sync.