example-c.js

// Option C:
// this implementation has a small amount of overhead compared to (a) and (b)
const React = require('react');

const counterState = React.createStateReducer({
  initialState: props => ({
    counter: 0,
    divRef: React.createRef(),
  }),  
  reducer: (action, state) => {
    switch (action) {
      case "INCREMENT": {
        return React.updateState({counter: state.counter + 1});
      }
    }
  },
  didUpdate: (props, state) => {
    state.divRef.style.color = props.color;      
  },  
});

function CounterComponent(props) {
  return counterState(props, (state, reduce) =>
    <div ref={state.divRef} onClick={() => reduce("INCREMENT"))}>
      Count: {state.counter}
    </div>
  );
}

module.exports = CounterComponent;

example-d.js

// Option D:
// has the least overhead of all the implementations in Safari
const React = require('react');

function initialState(props) (
  return {
    counter: 0,
    divRef: React.createRef(),
  }
)

function reducer(action, state) (
  switch (action) {
    case "INCREMENT": {
      return React.updateState({counter: state.counter + 1});
    }
  }
)

function didUpdate(props, state) {
  state.divRef.style.color = props.color;      
}

function CounterComponent(props) {
  return React.createStateReducer(
    {props, initialState, reducer, didUpdate}, 
    (state, reduce) => (
      <div ref={state.divRef} onClick={() => reduce("INCREMENT"))}>
        Count: {state.counter}
      </div>
    )
  );
}

module.exports = CounterComponent;

example-e.js

// Option E:
// has the least overhead of all the implementations in Chrome/Node/Firefox
const React = require('react');

const CounterComponent = {
  initialState(props) {
    return {
      counter: 0,
      divRef: React.createRef(),
    }
  },
  reducer(action, state) (
    switch (action) {
      case "INCREMENT": {
        return React.updateState({counter: state.counter + 1});
      }
  },
  didUpdate(props, state) {
    state.divRef.style.color = props.color;      
  },
  render(props, state, reduce) {
    return (
      <div ref={state.divRef} onClick={() => reduce("INCREMENT"))}>
        Count: {state.counter}
      </div>
    );
  }
}

module.exports = CounterComponent;

old-example-a.js

// Option A:
// this implementation has quite a bit of overhead in all browsers due to the
// function creation in the functional component
const React = require('react');

const counterState = React.createState();
const counterReducer = (action, state) => {
  switch (action) {
    case "INCREMENT": {
      return React.updateState({counter: state.counter + 1});
    }
  }
};

function CounterComponent(props) {
  return counterState({
     initialState: () => ({
       counter: 0,
       divRef: React.createRef(),
     }),
    didUpdate: state => {
      state.divRef.style.color = props.color;      
    },
    reducer: counterReducer,
    render(state, reduce) {
      return (
        <div ref={state.divRef} onClick={() => reduce("INCREMENT"))}>
          Count: {state.counter}
        </div>
      );
    }
  });
}

module.exports = CounterComponent;

old-example-b.js

// Option B:
// this implementation has quite a bit of overhead in all browsers due to the
// function creation in the functional component
const React = require('react');

const counterState = React.createStateReducer((action, state) => {
  switch (action) {
    case "INCREMENT": {
      return React.updateState({counter: state.counter + 1});
    }
  }
});

function CounterComponent(props) {
  return counterState({
     initialState: () => ({
       counter: 0,
       divRef: React.createRef(),
     }),
    didUpdate: state => {
      state.divRef.style.color = props.color;      
    },
    render(state, reduce) {
      return (
        <div ref={state.divRef} onClick={() => reduce("INCREMENT"))}>
          Count: {state.counter}
        </div>
      );
    }
  });
}

module.exports = CounterComponent;

@bvaughn I've updated example E after speaking with Dan. I think example A and B are probably going to be no goes because of the overhead they add in the render phase. The naming of createState() was also probably not the right name for this method.

The reason I went with different lifecycle names was purely to avoid confusion with existing ones – as the arguments passed wouldn't match up. I'm not fussed on name, I just didn't want to create more confusion. We could also infer async by default with some of them, to help the async story more (rather than sync like they are now).