Implementation for HOC

withSubscription.js

import React, { Component } from "react";
import DataSource from "../DataSource";

export default function withSubscription(Component, selectData) {
  return class extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange = () => {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      return <Component data={this.state.data} {...this.props} />;
    }
  };
}