use-reactive.jsx

import { render } from 'preact';
import { useRef, useState } from 'preact/hooks';


function useReactive (initialState) {
  let [, forceUpdate] = useState({});
  let reactive = useRef(null);

  if (!reactive.current) {
    reactive.current = new Proxy(initialState, {
      set (target, prop, value, receiver) {
        if (target[prop] !== value) {
          forceUpdate({});
        }

        return Reflect.set(target, prop, value, receiver);
      },
    });
  }

  return reactive.current;
}

function App() {
  let state = useReactive({ count: 0 });

  return (
    <div>
      <p>{Date.now()}</p>
      <p>{state.count}</p>
      <button onClick={() => state.count++}>+</button>
      <button onClick={() => state.count--}>-</button>
    </div>
  );
}