Hybrid controlled components solution: https://idiotwu.me/react-hybrid-controlled-components-in-action/

hybrid-ctrl.js

/**
 * Optimize hybrid controlled component by add some method into proto
 *
 * Usage:
 *   @hybridCtrl
 *   class App extends React.Component {
 *     ...
 *   }
 *
 *   @hybridCtrl('specified_prop_to_assign')
 *   class App extends React.Component {
 *     ...
 *   }
 *
 *  @hybridCtrl('specified_prop_to_assign', '_internal_prop')
 *   class App extends React.Component {
 *     ...
 *   }
 */

import shallowCompare from 'react-addons-shallow-compare';

const noop = () => {};

const optimizer = (Component, key = 'value', internalKey = `_${key}`) => {
  // need `this`
  function shallowCompareWithExcept(nextProps, nextState) {
    const props = {
      ...nextProps,
      [key]: this.props[key], // patched with same value
    };

    const state = {
      ...nextState,
      [internalKey]: this.state[internalKey],
    };

    return shallowCompare(this, props, state);
  }

  const {
    shouldComponentUpdate = shallowCompareWithExcept,
    componentWillReceiveProps = noop,
  } = Component.prototype;

  Object.defineProperty(Component.prototype, 'displayValue', {
    get: function getDisplayValue() {
      // prefer to use `props[key]`
      return this.props[key] !== undefined ?
        this.props[key] : this.state[internalKey];
    },
  });

  // assign new props to state
  Object.defineProperty(Component.prototype, 'componentWillReceiveProps', {
    configurable: false,
    enumerable: false,
    writable: true,
    value: function componentWillReceivePropsWrapped(nextProps) {
      const controlledValue = nextProps[key];
      if (controlledValue !== undefined &&
          controlledValue !== this.state[internalKey]
      ) {
        this.setState({
          [internalKey]: this.mapPropToState ?
            this.mapPropToState(controlledValue) : controlledValue,
        });
      }

      componentWillReceiveProps.call(this, nextProps);
    },
  });

  // patch shouldComponentUpdate
  Object.defineProperty(Component.prototype, 'shouldComponentUpdate', {
    configurable: false,
    enumerable: false,
    writable: true,
    value: function shouldComponentUpdateWrapped(nextProps, nextState) {
      let result = true;

      if (nextProps[key] !== undefined) {
        // controlled, use `props[key]`
        result &= (nextProps[key] !== this.props[key]);
      } else {
        // uncontrolled, use `state[internalKey]`
        result &= (nextState[internalKey] !== this.state[internalKey]);
      }

      // logic OR rocks
      return result ||
        shouldComponentUpdate.call(this, nextProps, nextState);
    },
  });

  return Component;
};

export const hybridCtrl = (keyOrComp, internalKey) => {
  if (typeof keyOrComp === 'function') {
    return optimizer(keyOrComp);
  }

  return (Component) => optimizer(Component, keyOrComp, internalKey);
};