higher-order component injected

BlogPost.diff

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

const TextBlock = ({ text }) => <>{text}</>;

class BlogPost extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: DataSource.getBlogPost(props.id)
-    };
-  }

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

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

-  handleChange = () => {
-    this.setState({
-      data: DataSource.getBlogPost(this.props.id)
-    });
-  }

  render() {
    return <TextBlock text={this.props.data} />;
  }
}

+export default withSubscription(BlogPost, (DataSource, props) =>
+  DataSource.getBlogPost(props.id)
+);