more-ideas-with-state.js

const state = React.createState({
  initialState(props) {
    return {
      counter: 0,
      buttonRef: React.createRef(),
      lastProps: props,
    };
  },
  deriveState(props, state) {
    return {
      lastProps: props,
    };
  },
  shouldUpdate(props, state) {
    return shallowCheck(state.lastProps, props);
  },
  didMount(props, state) {
    // ...
  },
  didUpdate(props, state) {
    // ...
  },
  willUnmount(props, state) {
    // ...
  },
});

function MyComponent(props) {
  // sugar with a "::" before the name, to state we reading from it
  const { state, setState } = <::State {...props} />;
  
  return (
    <button onClick={reduceState(handleClick)} ref={state.buttonRef}>
      Counter: {state.counter}
    </button>
  );
}