Code from Migrating from Unsafe React Lifecycle Hooks https://www.youtube.com/watch?v=G9S1IghlkCI

Chat.after.js

import React, { Component } from "react";
import Button from "./Button";
import Message from "./Message";
import { getMessage } from "./utils";

export default class Chat extends Component {
  state = {
    isStreaming: this.props.isStreaming,
    messages: [getMessage()]
  };
  componentDidMount() {
    this.timerID = setInterval(() => {
      if (this.state.isStreaming) {
        this.generateMessage();
      }
    }, 1000);
    document.addEventListener("keydown", this.handleKey);
  }
  generateMessage = () => {
    const message = getMessage(this.state.messages);
    this.setState(prevState => ({
      messages: [...prevState.messages, message]
    }));
  };
  handleStreaming = e => {
    this.setState(prevState => ({
      isStreaming: !prevState.isStreaming
    }));
  };
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.isStreaming !== prevState.isStreaming) {
      return { isStreaming: nextProps.isStreaming };
    }
    return null;
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    const { current } = this.ulRef;
    return {
      shouldAutoScroll:
        current.scrollTop + current.clientHeight >=
        current.scrollHeight
    };
  }
  componentDidUpdate(
    prevProps,
    prevState,
    { shouldAutoScroll }
  ) {
    if (shouldAutoScroll) {
      const { current } = this.ulRef;
      current.scrollTop = current.scrollHeight;
    }
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
    document.removeEventListener("keydown", this.handleKey);
  }
  handleKey = e => {
    if (e.key === "c") {
      this.setState({
        messages: [getMessage()]
      });
    }
  };
  ulRef = React.createRef();
  render() {
    const { isStreaming, messages } = this.state;
    return (
      <fieldset className="Chat">
        <legend className="Chat-legend">
          Chat Messages
        </legend>
        <ul ref={this.ulRef} className="Chat-list">
          {messages.map(message => (
            <Message key={message.time} {...message} />
          ))}
        </ul>
        <Button onClick={this.handleStreaming}>
          {isStreaming ? "Pause" : "Start"}
        </Button>
      </fieldset>
    );
  }
}

Chat.before.js

import React, { Component } from "react";
import Button from "./Button";
import Message from "./Message";
import { getMessage } from "./utils";

export default class Chat extends Component {
  state = {
    isStreaming: this.props.isStreaming,
    messages: [getMessage()]
  };
  UNSAFE_componentWillMount() {
    this.timerID = setInterval(() => {
      if (this.state.isStreaming) {
        this.generateMessage();
      }
    }, 1000);
    document.addEventListener("keydown", this.handleKey);
  }
  generateMessage = () => {
    const message = getMessage(this.state.messages);
    this.setState(prevState => ({
      messages: [...prevState.messages, message]
    }));
  };
  handleStreaming = e => {
    this.setState(prevState => ({
      isStreaming: !prevState.isStreaming
    }));
  };
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.isStreaming !== this.state.isStreaming) {
      this.setState({
        isStreaming: nextProps.isStreaming
      });
    }
  }
  UNSAFE_componentWillUpdate(nextProps, nextState) {
    const { current } = this.ulRef;
    this.shouldAutoScroll =
      current.scrollTop + current.clientHeight >=
      current.scrollHeight;
  }
  componentDidUpdate(prevProps, prevState) {
    if (this.shouldAutoScroll) {
      const { current } = this.ulRef;
      current.scrollTop = current.scrollHeight;
    }
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
    document.removeEventListener("keydown", this.handleKey);
  }
  handleKey = e => {
    if (e.key === "c") {
      this.setState({ messages: [getMessage()] });
    }
  };
  ulRef = React.createRef();
  render() {
    const { isStreaming, messages } = this.state;
    return (
      <fieldset className="Chat">
        <legend className="Chat-legend">
          Chat Messages
        </legend>
        <ul ref={this.ulRef} className="Chat-list">
          {messages.map(message => (
            <Message key={message.time} {...message} />
          ))}
        </ul>
        <Button onClick={this.handleStreaming}>
          {isStreaming ? "Pause" : "Start"}
        </Button>
      </fieldset>
    );
  }
}