Composing Behavior with React hooks - Class Component baseline

NotificationBanner-ClassComponent.tsx

import React from "react";

export default class NotificationBanner extends React.Component {
  intervalId = null;
  state = {
    notifications: [],
    isLoading: true,
    currentPage: 1
  };
  componentDidMount() {
    this.setState({ notifications: NOTIFICATIONS_DATA, isLoading: false });
    this.startAutoPaging();
  }
  componentWillUnmount() {
    this.stopAutoPaging();
  }
  startAutoPaging = () => {
    this.stopAutoPaging();
    this.intervalId = setInterval(this.goForward, 2000);
  };
  stopAutoPaging = () => {
    if (this.intervalId) clearInterval(this.intervalId);
  };
  goBack = () => {
    let newPage = this.state.currentPage - 1;
    if (newPage < 1) newPage = this.state.notifications.length;
    this.setState({ currentPage: newPage });
  };
  goForward = () => {
    let newPage = this.state.currentPage + 1;
    if (newPage > this.state.notifications.length) newPage = 1;
    this.setState({ currentPage: newPage });
  };
  handleMouseEnter = () => {
    this.stopAutoPaging();
  };
  handleMouseLeave = () => {
    this.startAutoPaging();
  };
  render() {
    let activeItem: Notification = this.state.notifications.length
      ? this.state.notifications[this.state.currentPage - 1]
      : {};
    return (
      <div
        className="notifications"
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
      >
        <button onClick={this.goBack}>Prev</button>
        <div className="active-item">{activeItem.title}</div>
        <button onClick={this.goForward}>Next</button>
      </div>
    );
  }
}

const NOTIFICATIONS_DATA = [
  { title: "React hooks change the way we write components." },
  { title: "useState puts state in Function Components" },
  { title: "useEffect handles your component lifecycle needs" }
];