What's the benefit of this, over just using proxies [1][2] to manage state? You then get to mutate objects however you want without having to use templating.

    const state = proxy({
      dur: 1,
      count: 141
    });
    const incDur = () => {++state.dur};
    const decDur = () => {--state.dur};
    const incCount = () => {
      ++state.count;
      setTimeout(incCount, 100 \* state.dur);
    };
    return (
      <div>{state.count}, {state.dur}</div>
    );

Is it specifically proxies only work on objects, and in this approach you can have direct variables?

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... [2] https://valtio.dev