Cleaner Efficient Code with Hooks and Functional Programming - Huge Components issue

LazyLoader.jsx

// Class component

import React from "react";

export default class LazyLoader extends React.Component {
  constructor(props) {
    super(props);

    this.state = { data: [] };
  }

  loadMore = () => {
    // Load More Data
    console.log("loading data");
  };

  handleScroll = () => {
    if (!this.props.isLoading && this.props.isCompleted) {
      this.loadMore();
    }
  };

  componentDidMount() {
    this.loadMore();
    document.addEventListener("scroll", this.handleScroll, false);
    // more subscribers and event listeners
  }

  componentDidUpdate() {
    //
  }

  componentWillUnmount() {
    document.removeEventListener("scroll", this.handleScroll, false);
    // unsubscribe and remove listeners
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}