I wonder if there is a way to override/enhance setState. I keep getting this error: http://d.pr/i/LVAF+ and http://d.pr/i/X2Vo+ so I wonder if this is do-able?

enhance_setstate.js

/**
 * I want to write a HOC, that can intercept the setState functionality
 * 
 * For some context: I'm writing a personal assistant: https://github.com/SmithersAssistant/Smithers
 * and I have a plugin system, now I want to store the state of plugins into localStorage
 * so that later on I can restore the state
 * 
 * Ideally I would want something like this:
 */
const NOOP = () => {}
const restorableComponent = (Component) => {
  return React.createClass({
    componentDidMount () {
      if (this.component) {
        const originalSetState = this.component.setState || NOOP
        const originalGetInitialState = this.component.getInitialState || NOOP;

        this.component.setState = (newState = {}, cb = NOOP) => {
          console.log('storing state of component') // Pretending to store it...
          return originalSetState(newState, cb)
        }

        this.component.getInitialState = () => {
          const restoredState = {} // Think that this came from the localStorage

          return {
            ...restoredState,
            ...originalGetInitialState()
          }
        }
      }
    },
    render () {
      return (
        <Component
          ref={component => this.component = component}
          {...this.props}
        />
      )
    }
  })
}

/**
 * So I could use it like this:
 * 
 * P.S.: YEAH React.createClass FTW!
 */
const SomePlugin = React.createClass({
  getInitialState () {
    return {
      count: 0
    }
  },
  componentDidMount () {
    this._interval = setInterval(() => this.setState({count: this.state.count}))
  },
  componentWillUnmount () {
    clearInterval(this._interval)
  },
  render () {
    return (
      <span>Counting {this.state.count}</span>  
    )
  }
})

export default restorableComponent(SomePlugin)

Eventually I came up with this:

export default (Component) => {
  class EnhancedClass extends Component {
    constructor (...args) {
      super(...args)

      this.state = {
        ...this.state,
        ...this.props.getState()
      }
    }

    setState (state = {}, cb = () => {}) {
      super.setState(state, cb)
      this.props.setState(state)
    }
  }

  return EnhancedClass
}

the this.props.getState() and this.props.setState() are injected via something different. But those allow you to (write to)/(read from) some storage engine like localStorage