Handle componentWillUnmount() logic for DataSource

BlogPost.js

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

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

export function BlogPost({ id }) {
  // State is declared in pair: state value and setState function
  const [data, setData] = useState(DataSource.getBlogPost(id));

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    const setDataSourceData = () => setData(DataSource.getBlogPost(id));

    DataSource.addChangeListener(setDataSourceData);
    // Similar to componentWillUnmount
    return () => DataSource.removeChangeListener(setDataSourceData);
  });

  return <TextBlock text={data} />;
}