В чем разница между шаблоном React HOC и render-props?

Я только что выучил эти два паттерна. Я совершенно не понимаю, как правильно использовать этот шаблон.

Я создал компонент и пытаюсь применить эти шаблоны. Все работает так же.

Исходный код: https://codesandbox.io/s/n504v2njr4

Шаблон Render Props

class Toggle extends Component {
  state = {
    on: false,
  }

  onToggle = () => {
    this.setState(({ on }) => ({ on: !on}));
  }

  getStateHelper = () => ({
    on: this.state.on,
    toggle: this.onToggle,
  });

  render() {
    return this.props.children(this.getStateHelper())
  }
}

использование

  <Toggle>
    {({on, toggle}) => (<button onClick = {toggle}>{on ? 'On' : 'Off'}</button>)}
  </Toggle>

Шаблон компонента высокого порядка

function ToggleHoc(Comp) {
  return class ToggleHocWrap extends Component {
    state = {
      on: false,
    }

    onToggle = () => {
      this.setState(({ on }) => ({ on: !on}));
    }

    getStateHelper = () => ({
      on: this.state.on,
      toggle: this.onToggle,
    });

    render() {
      return (<Comp {...this.getStateHelper()} />)
    }
  }
}

использование

function TestToggle({ on, toggle }) {
  return (<button onClick = {toggle}>{on ? 'On' : 'Off'}</button>)
}

const WithToggle = ToggleHoc(TestToggle);

Пожалуйста помогите!. Спасибо вам, ребята.