React Lazy Load Data With Images On Scroll Example

Hello react developers in this example i am going to discuss about react lazy load component on scroll example. In this tutorial you will learn step by step that how we can lazy load our images on scroll. It is very needed thing for your large data.

Lazyload your Components, Images or anything that matters the performance fo your react application. In this example when we will scroll then we will lazy load our content. To do react lazy loading images i will use react-lazyload package.

So see the preview from below image

Let's start. First install this package via command.

npm install --save react-lazyload

Then create a file data.js and paste those below code. You have to create more data to see the scroll effect. So copy data object and make it more.

src\data.js

export default [
    {
      userId: 1,
      id: 1,
      title:
        "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      body:
        "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
      img: "https://picsum.photos/id/"
    }
  ];
  

Now paste this code in your App.js

src\App.js

Read also: Share Link in Linkedin in React Application Tutorial

Hope it can help you.