react hooks on getters/setters — useStateObj

app-example.js

import React from "react";
import ReactDOM from "react-dom";
import useStateObj from "use-state-obj";

function App() {
  var state = useStateObj({a:1})

  function handleClick() {
    ++state.a
  }

  return (
    <div className="App">
      <h1>Hello, {state.a}!</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={ handleClick }>click</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

lib.js

function useStateObj(props) {
    const props_ = Object.entries(props).reduce((res, [key, val]) => {
    const [v, setV] = useState(val);
        res[key] = { get: () => v, set: (v) => setV(v) };
        return res;
    }, {});
    return Object.defineProperties({}, props_);
}