I have more ponents in one page. All pages loaded at the same time. But i want after scroll event loading next ponentas.

HomePage.js:

render() {
        return (
            <section className="section1">
                    <Component1 />
            </section>          <section className="section2">                
                    <Component2 />                
            </section>
             <section className="section3">
                <Component3 />
             </section>
             <section className="section4">
                <Component4 />
             </section>
             <section className="section5">
                <Component5 />
            </section>
            <footer>
                <Footer />
            </footer>       
         );
    }

Have any idea? It is possible in react.

Thank you!

I have more ponents in one page. All pages loaded at the same time. But i want after scroll event loading next ponentas.

HomePage.js:

render() {
        return (
            <section className="section1">
                    <Component1 />
            </section>          <section className="section2">                
                    <Component2 />                
            </section>
             <section className="section3">
                <Component3 />
             </section>
             <section className="section4">
                <Component4 />
             </section>
             <section className="section5">
                <Component5 />
            </section>
            <footer>
                <Footer />
            </footer>       
         );
    }

Have any idea? It is possible in react.

Thank you!

• javascript
• reactjs
• lazy-loading
• infinite-scroll

• I'm not too sure how to implement this, however I know there's an npm package that could acplish this: npmjs./package/react-infinite – MEnf Commented Dec 19, 2017 at 16:31

1 Answer 1

You'll need to listen to a scroll event -- something like this:

ponentDidMount() {
    window.addEventListener('scroll', this.handleScroll)
}

Keep in mind that you may want to listen to a scroll event on a specific element, and not the entire window. This will depend on your requirements for how/when these other ponents should load.

In handling that event, keep track of your scroll distance somehow.

handleScroll = (event) => {
    this.setState({
        scrollY: window.scrollY
    });
}

Note: Updating your state on every scroll event is probably over-kill though. I think the best approach would be to detect when the user has scrolled to the bottom and then conditionally load/render new ponents.

Then, in your render function, conditionally render additional ponents based on the value of your scroll distance. Again, you will likely need to include more sophisticated logic here based on your specific needs, but here is a rudimentary example based on scroll distance:

render() {
    let additionalComponents = null;

    if (this.state.scrollY > 1000) { //arbitrary amount
        additionalComponents = (
            <Component6 />
        );
    }

    return (
        <section className="section1">
                <Component1 />
        </section>          <section className="section2">                
                <Component2 />                
        </section>
         <section className="section3">
            <Component3 />
         </section>
         <section className="section4">
            <Component4 />
         </section>
         <section className="section5">
            <Component5 />
        </section>

        { additionalComponents }

        <footer>
            <Footer />
        </footer>       
     );
}