Lazy Loading😴😴 In React [Easy way]

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?

	import React from 'react';
	import moment from 'moment';
	import LazyLoad from 'react-lazyload';
	import './albums.css'
	export default (props)=>{
	function formatDate(date, format){
	return moment(date).format(format);
	};
	return(
	<ul className="album">
	<li className="imgs album-item">
	<a href={props.link} target="blank" className="link">
	<LazyLoad height={200} >
	<img className="album-img"src={props.image} alt={'itunes'+Math.random()} />
	</LazyLoad>
	</a>
	</li>
	<li className="title album-item">
	<a href={props.link} target="blank" className="link">
	{props.title.slice(0,20)}..</a></li>
	<li className="price album-item">Price:{props.price}</li>
	<li className="date album-item">Released:{formatDate(props.date,"MMM Do YY")}</li>
	</ul>
	)
	}

view raw lazyimages hosted with ❤ by GitHub

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📯📯

Comments

[Kushan Joshi]

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]

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?