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 - Huge Components issue
// 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>;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment