1-future-ideas.js

const React = require("react");

const Lifecycles = React.createLifecycleEvents({
  didMount({ setState }) {
    setState({
      disabled: false,
    });
  },
  didUpdate({ inputRef }) {
    if (document.activeElement !== inputRef.value) {
      inputRef.value.focus();
    }
  }
});

// pass in initial state
const State = React.createState({
  disabled: true,
  text: "",
});

function TextboxView(props) {
  const inputRef = React.createRef();

  return (
    <State>
      {(state, setState) => (
        <Lifecycles inputRef={inputRef} setState={setState}>
          <input
            {...props}
            ref={inputRef} 
            disabled={state.disabled}
            onChange={e => setState({text: e.target.value})} 
            value={state.text}
          />
        </Lifecycles>
      )}
    </State>
  );
}

2-future-ideas.js

const React = require("react");

const Lifecycles = React.createLifecycleEvents({
  componentDidMount({ setState }) {
    setState({
      disabled: false,
    });
  },
  componentDidUpdate({ inputRef }) {
    if (document.activeElement !== inputRef.value) {
      inputRef.value.focus();
    }
  }
});

const State = React.createState({
  disabled: true,
  text: "",
});

function ListView() {
  const inputRef = React.createRef();
  // "adopt" could be sugar syntax for React's callReturn functionality
  const { state, setState } = adopt <State />;

  return (
    <Lifecycles inputRef={inputRef} setState={setState}>
      <input 
        ref={inputRef} 
        disabled={state.disabled}
        onChange={e => setState({text: e.target.value})} 
        value={state.text}
      />
    </Lifecycles>
  )
}