The HOC Drill Pattern [AFTER]

MyContainer.js

import React, { Component } from 'react'
import MyWrappedComponent from './MyWrappedComponent'

export default class MyContainer extends Component {
  constructor() {
    // bind handlers
    this.handleCallback = this.handleCallback.bind(this)
  }
  
  handleCallback(load, save, clear) {
    // save instance methods from MyWrappedComponent to this
    this.handleLoad = load
    this.handleSave = save
    this.handleClear = clear
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleLoad}>Load</button>
        <button onClick={this.handleSave}>Save</button>
        <button onClick={this.handleClear}>Clear</button>
        <MyWrappedComponent methodCallback={this.handleCallback}/>
      </div>
    )
  }
}

MyWrappedComponent.js

import React, { Component } from 'react'
import { hocLibrary } from 'some-hoc-library'

@hocLibrary({ config: 'parameters' })
export default class MyWrappedComponent extends Component {
  componentWillMount() {
    this.props.methodCallback(
      this.load.bind(this),
      this.save.bind(this),
      this.clear.bind(this)
    )
  }
  
  load() {
    // load something
  }
  
  save() {
    // save something
  }
  
  clear() {
    // clear something
  }
  
  render() {
    return <div>Gorgeous UI</div>
  }
}