The HOC Drill Pattern [BEFORE]

MyContainer.js

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

export default class MyContainer extends Component {
  constructor() {
    // bind handlers
    this.handleLoad = this.handleLoad.bind(this)
    this.handleSave = this.handleSave.bind(this)
    this.handleClear = this.handleClear.bind(this)
  }
  
  handleLoad() {
    // somehow call load() on MyWrappedComponent
  }
  
  handleSave() {
    // somehow call save() on MyWrappedComponent
  }
  
  handleClear() {
    // somehow call clear() on MyWrappedComponent
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleLoad}>Load</button>
        <button onClick={this.handleSave}>Save</button>
        <button onClick={this.handleClear}>Clear</button>
        <MyWrappedComponent/>
      </div>
    )
  }
}

MyWrappedComponent.js

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

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