React.createState.js

const State = React.createState();

function MyComponent(props) {
  return (
    <State
      initialState={() => ({ counter: 0, lastProps: props, divRef: React.createRef() }) }
      deriveState={state => ({ lastProps: props }) }
      shouldUpdate={(state, nextState) => ... }
      didMount={(state, setState) => ... }
      getSnapshotBeforeUpdate={state => ... }
      didUpdate={(state, setState, prevState, snapshot) => ... }
      willUnmount={state => ... }
    >
      {(state, setState) => (
        ...
      )}
    </State>
  );
}

Points:

• Is React.createRef() the best API for this? Is it confusing that <State> has all the lifecycles?
• I had an earlier draft of pulling out lifecycle events from the state but many feel this is just added noise and state and lifecycles belong together.
• This really bodes well with my JSX sugar adopt syntax, it makes render props like above far less painful to use.
• should initialState be initial? Should deriveState be derive? Does it matter?

s/createRef/createState/

should initialState be initial? Should deriveState be derive? Does it matter?

Maybe initialValue but I don't think initial has enough meaning anything by itself. "Initial...what?".

I also think deriveState and initialState are fine as is.