Sai gowtham

Posted on May 25, 2018 • Edited on May 27, 2018

Lazy Loading😴😴 In React [Easy way]

#react #javascript #webdev #frontend

React lazy load package helps to load React component that renders children elements when they enter the viewport.

Lets Us see the live example for that I have used iTunes API to show the how react-lazy-load works.

Itunes Example

Where I used it?

I used react lazy load component to wrap the image element. so that all images in the site doesn't fetch on the first request.

It only makes the fetch request whenever the user scrolls to that position.

Code Repository

Live Example

Other Interesting Stuff

How To implement Lazy Loading in Angular 6📯📯

Top comments (2)

Kushan Joshi • May 30 '18 • Edited

Nice article Sai!

One humble suggestion, 'please format your code'. At first glance I couldn't understand what was going on as your code looks like this

export default (props)=>{

function formatDate(date, format){
    return moment(date).format(format);
  };

    return(
          <ul >
         </ul>
   )
}

No matter how cool the logic is, It is always a good idea to follow a consistent formatting.

I know fiddling with indentation sucks, that is why we have a tool called prettier, which takes care of formatting for you. I strongly suggest you use that.

Side note: Why do you need to define formatDate inside the react component ?

Daniel Jones • Sep 4 '19

This looks like magic! Does it just get the next x amount of items from props? I have a JSON that I want to lazy load images from in this way, is there anything else I need to do?

DEV Community

Lazy Loading😴😴 In React [Easy way]

Itunes Example

Where I used it?

Code Repository

Live Example

How To implement Lazy Loading in Angular 6📯📯

Top comments (2)

Read next

9 Open Source Libraries to Supercharge Your Next Project 🔋⚡️

Sending Emails with Mailer in PHP + Symfony

Task manger app

React Hydration Explained 🔥