Simple mutable state in React using Proxy

react-use-proxy.tsx

import * as React from 'react';

function useProxy<T>(initialValue: T) {
  const [state, setState] = React.useState(initialValue);
  const proxy = React.useMemo(() => {
    return new Proxy(
      { value: state },
      {
        set(obj, prop, value) {
          if (prop === 'value') {
            setState(value);
            obj.value = value;
            return true;
          }
        },
      }
    );
  }, []);
  return proxy;
}

export default function App() {
  const count = useProxy(0);

  return (
    <div>
      <h1>Count: {count.value}</h1>
      <button onClick={() => count.value++}>Add 1</button>
      <button onClick={() => count.value--}>Subtract 1</button>
      <button onClick={() => (count.value = 0)}>Reset to 0</button>
      <button onClick={() => (count.nuke = 'boom')}>BREAK EVERYTHING</button>
    </div>
  );
}