Cleaner Efficient Code with Hooks and Functional Programming - Fixing Huge Components with hooks

LazyLoader.jsx

import React, { useEffect, useState } from "react";

export const LazyLoader = ({ isLoading, isCompleted }) => {
  const [data, setData] = useState([]);

  const loadMore = () => {
    // Load and setData here
  };

  const handleScroll = () => {
    if (!isLoading && isCompleted) {
      loadMore();
    }
  };

  // cDM and cWU
  useEffect(() => {
    document.addEventListener("scroll", handleScroll, false);
    // more subscribers and event listeners

    return () => {
      document.removeEventListener("scroll", handleScroll, false);
      // unsubscribe and remove listeners
    };
  }, []);

  // cDU
  useEffect(() => {
    //
  }, [/** dependencies */]);

  return data && <div>{data}</div>;
};