Cleaner Efficient Code with Hooks and Functional Programming - Fixing Huge Components with hooks - Logic separation using a custom hook

useScroll.js

import { useEffect, useState } from "react";

export function useScroll() {
  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
    };
  }, []);

  return data;
};