DEV Community

Son Goku
Son Goku

Posted on • Updated on

React infinite scroll in few lines

Introduction

What is infinite scroll ?

Infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination.
Some sites where you can see usage of infinity scroll are for example: Twitter, 9gag etc...

What are we going to build

Alt Text

I know nothing to fancy looking, but you can improve and style it, so it looks better, this is just a basic example and introducting a concept

Prerequisites

  • This tutorial assumes that you have working knowledge of React
  • We are going to Use React Hooks
  • Before we get started, ensure that you have Node, Yarn, or npm installed in your environment.
  • Have a Web browser offcourse

Getting started

npx create-react-app infiniteScroll
Enter fullscreen mode Exit fullscreen mode

Once you have finished creating the project folder you can cd into it, and run it:

cd infiniteScroll 
npm start
Enter fullscreen mode Exit fullscreen mode

This will run the app in development mode and you can view it in the browser using the link http://localhost:3000/.

It will look like this:

Alt Text

Component Setup

Create new Infinite scroll component and paste following code inside it:

import React, { useState  } from 'react';
// styling post container
const divStyle = {
    color: 'blue',
    height: '250px',
    textAlign: 'center',
    padding: '5px 10px',
    background: '#eee',
    marginTop: '15px'
};

// styling container wrapper
const containerStyle = {
    maxWidth: '1280px',
    margin: '0 auto',
}

const InfiniteScroll = () => {
    // initialize list of posts
    const [postList, setPostList] = useState({
        list: [1,2,3,4]
    }); 


    return (<div className="container" style={containerStyle}>
        <div className="post-list">
            {
                postList.list.map((post, index) => {
                    return (<div key={index} 
                             className="post" 
                             style={divStyle}>
                        <h2> {post } </h2>
                    </div>)
                })
            }
            <div className="loading">
                    <h2>Load More</h2>
           </div>
        </div>
    </div>)
}

export default InfiniteScroll;
Enter fullscreen mode Exit fullscreen mode

Your page will now look like this:

Alt Text

Adding infinite scroll

For this we would use Interaction Observer API
Intersection Observer is a really awesome JavaScript API that simplifies scroll-based events in JavaScript. Rather than constantly checking the distance from the top, Intersection Observer watches when an element enters or exits the viewport.

We will use interaction Observer to watch when user enters specific point and then load more posts.

  • First we will import **useRef* and useEffect hook from React and attach them to Load More div*
  • then will register IntersectionObserver on Load More div when component is mounted
  • add new state variable page, that will track on what page we currently are. To simulate more real life example how we would do it when connecting with backend
  • the last step when page is update, simply just load more posts

Here is a complete code:

import React, { useEffect, useState, useRef  } from 'react';

const divStyle = {
    color: 'blue',
    height: '250px',
    textAlign: 'center',
    padding: '5px 10px',
    background: '#eee',
    marginTop: '15px'
};


const containerStyle = {
    maxWidth: '1280px',
    margin: '0 auto',
}
const InfiniteScroll = () => {
    const [postList, setPostList] = useState({
        list: [1,2,3,4]
    }); 
    // tracking on which page we currently are
    const [page, setPage] = useState(1);
    // add loader refrence 
    const loader = useRef(null);

    useEffect(() => {
         var options = {
            root: null,
            rootMargin: "20px",
            threshold: 1.0
         };
        // initialize IntersectionObserver
        // and attaching to Load More div
         const observer = new IntersectionObserver(handleObserver, options);
         if (loader.current) {
            observer.observe(loader.current)
         }

    }, []);


    useEffect(() => {
        // here we simulate adding new posts to List
        const newList = postList.list.concat([1,1,1,1]);
        setPostList({
            list: newList
        })
    }, [page])

    // here we handle what happens when user scrolls to Load More div
   // in this case we just update page variable
    const handleObserver = (entities) => {
        const target = entities[0];
        if (target.isIntersecting) {   
            setPage((page) => page + 1)
        }
    }


    return (<div className="container" style={containerStyle}>
        <div className="post-list">
            {
                postList.list.map((post, index) => {
                    return (<div key={index} className="post" style={divStyle}>
                        <h2> {post } </h2>
                    </div>)
                })
            }
             <!-- Add Ref to Load More div -->
            <div className="loading" ref={loader}>
                    <h2>Load More</h2>
           </div>
        </div>
    </div>)
}

export default InfiniteScroll;
Enter fullscreen mode Exit fullscreen mode

This is my first post on Dev.to Thank you for reading :)

If you liked this post, you can find more by:

Following me on Twitter:

Top comments (20)

Collapse
 
pacopacov profile image
PacoPacov • Edited

Here is a cleaner version of the code above that compliance with Eslint.
There is a problem with the code . It'll add infinite number of elements without being triggered by scrolling to the end of the list.

import React, { useEffect, useState, useRef } from 'react'

const divStyle = {
  color: 'blue',
  height: '250px',
  textAlign: 'center',
  padding: '5px 10px',
  background: '#eee',
  marginTop: '15px',
}

const containerStyle = {
  maxWidth: '1280px',
  margin: '0 auto',
}

export function InfiniteScroll() {
  const [postList, setPostList] = useState({ list: [1, 2, 3, 4] })
  // tracking on which page we currently are
  const [page, setPage] = useState(1)
  // add loader reference
  const loader = useRef(null)
  // here we handle what happens when user scrolls to Load More div
  // in this case we just update page variable
  const handleObserver = (entities) => {
    const target = entities[0]
    if (target.isIntersecting) {
      setPage(_page => _page + 1)
    }
  }

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: '20px',
      threshold: 1.0,
    }
    // initialize IntersectionObserver and attaching to Load More div
    const observer = new IntersectionObserver(handleObserver, options)
    if (loader.current) {
      observer.observe(loader.current)
    }
  }, [])

  useEffect(() => {
    // here we simulate adding new posts to List
    const newList = postList.list.concat([1, 1, 1, 1])
    setPostList({
      list: newList,
    })
  }, [page, postList.list])

  return (
    <div className="container" style={containerStyle}>
      <div className="post-list">
        {postList.list.map((post, index) => (
          <div key={index} className="post" style={divStyle}>
            <h2>{post}</h2>
          </div>
        ))}
        <div className="loading" ref={loader}>
          <h2>Load More</h2>
        </div>
      </div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto

Be carefull... that postList.list as dependencies will make your component enter an infinite loop of rerenders. It is better to access this property via an arrow function.

  useEffect(() => {
    setPostList((x) => ({
      list: x.concat([1, 1, 1, 1]),
    }))
  }, [page])
Enter fullscreen mode Exit fullscreen mode

Also, handleObserver is better to be insde the useEffect function and you should clear (observer.unobserve) the listener on a callback funtion. ;)

Collapse
 
leomjaques profile image
leo 👨🏻‍💻

Nice, Kakarot. I will for sure try it out ✨

Collapse
 
hunterjsbit profile image
Son Goku

Thank you for reading, and yes please go try it out :)

Collapse
 
momin profile image
Md Abdul Momin

You wrote ContactPage function and export InfiniteScroll ! Should review the code and fix

Collapse
 
ipoool profile image
Asep saepulloh

haha yes, I think he has tried to copy-paste and forget to change the name of function 😁

Collapse
 
hunterjsbit profile image
Son Goku

Updated thank you, Yup you are right left over while copying from VS code :D

Collapse
 
benupham profile image
benupham

How would I turn off this observer when certain conditions are met, for example if some state changes (ie, I make it to the last set of items/last page)? I've tried observer.disconnect inside the useEffect hook, but it does not seem to work.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Thanks good article I will try this out.

Collapse
 
wintercounter profile image
Victor Vincent

Reading y is unnecessary in handleObserver.

Collapse
 
hunterjsbit profile image
Son Goku

Yes you are right

Collapse
 
saviomartin profile image
Savio Martin

Thank you!

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

Nice article! But please add the javascript tag to the code-blocks for syntax highlights

Collapse
 
tombohub profile image
tombohub

why dont you have syntax highlighting?

Collapse
 
chisach profile image
Book

Thank you very much, brother