origin

High level HOC enables you:

  • Code reuse, logic and bootstrap abstraction
  • Render Highjacking
  • State abstraction and manipulation
  • Props manipulation

But it depends, because the implementation allows and restricts what you can actually do with an HOC

Props Proxy

   function ppHOC(WrappedComponent) {
       return class extends React.Component {
           render() {
              return <WrappedComponent {...this.props} />
           }
       }
   }

what can be done with props proxy

  • Manipulating props
  • Accessing the instance via Refs
  • Abstracting State

  • Wrapping the WrappedComponent with other elements

  • Accessing the instance via Refs 
    function refsHOC(WrappedComponent) {
  return class RefsHOC extends React.Component {
    proc(wrappedComponentInstance) {
      wrappedComponentInstance.method()
    }
      
    render() {
      const props = Object.assign({}, this.props, {ref: this.proc.bind(this)})
      return <WrappedComponent {...props}/>
    }
  }
}

  • Abstracting State ```js function ppHOC(WrappedComponent) { return class PP extends React.Component { constructor(props) { super(props); this.state = { name: ‘’ }

            this.onNameChange = this.onNameChange.bind(this);
    }

    onNameChange(event) {
        this.setState({
            name: event.target.value
        })
    }

    render() {
        const newProps = {
            name: {
                value: this.state.name,
                onChange: this.onNameChange
            }
        }

        return <WrappedComponent {...this.props} {...newProps} />
    }
} }

    @ppHOC class Example extends React.Component { render() { return <input name=”name” {…this.props.name} /> } }


## Inheritance Inversion
```js
  function iiHOC(WrappedComponent) {
    return class Enhancer extends WrappedComponent {
      render() {
        return super.render()
      }
    }
  }

Inheritance Inversion allows the HOC to have access to the WrappedComponent instance via this, which means it has access to the state, props, component lifecycle hooks and the render method

Inheritance Inversion High Order Components don’t have a guaranty of having the full children tree resolved.