Skip to content

Instantly share code, notes, and snippets.

@velotiotech
Last active Jun 25, 2020
Embed
What would you like to do?
Cleaner Efficient Code with Hooks and Functional Programming - Fixing Huge Components with hooks
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>;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment