Up next in 10
Build a React.js Lazy Loading App with Dynamic Data From API for SEO Using react-lazyload Library
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/397669e9d95f6dff1d6e5ea9079ba755
View Video Transcript
0:00
uh hello guys welcome to this video so
0:03
in this video I will show you how to
0:05
Lazy load the data Dynamic data that you
0:09
fetch from the API inside react chairs
0:12
using a package called as react lazy
0:14
load so you can see I'm fetching the
0:16
data from a rest API which is Json
0:18
placeholder API so you can see as I'm
0:22
scrolling down the data is lazy loading
0:25
you can see as I'm just you can see now
0:27
the data is lazy loading so all the data
0:31
is not loaded at in the page for the
0:34
very first time as we scroll down as the
0:36
user scroll the data comes him
0:38
dynamically lazy loaded so I will show
0:41
you how to configure lazy loading inside
0:44
react chairs with this package so that
0:46
whenever you pull data from a rest API
0:49
all the data is not pulled
0:51
in straight away but as you as the user
0:54
scroll you will see the data will come
0:57
so this is containing text and images
1:00
and we are using a simple rest API
1:02
called Json placeholder API so there is
1:05
this package which I'm talking about
1:07
which is react lazy load this is a very
1:11
popular
1:12
package specifically it's built for
1:15
react Chas applications and lazy load is
1:18
a technique by which you load the data
1:21
only a certain amount of data when you
1:24
render the application for the very
1:26
first time so I will use the same
1:29
technique
1:31
so this is specifically done for reactjs
1:34
applications so this is actually the
1:36
package npmi react lazy load so you just
1:41
need to install this package by
1:43
installing this and it's almost having
1:45
2, 21,000 weekly downloads so I will
1:49
just show you step by step to actually
1:52
implement
1:53
this so first of
1:56
all just make a simple functional
1:58
component
2:06
so after this you will be importing this
2:08
module so you'll be simply saying
2:11
import lazy load and it will be coming
2:15
from this package react lazy load it's
2:18
almost 9.25 kiloby of size of this
2:22
package and now inside of our state we
2:25
will be having two
2:27
variables first for keeping track of the
2:30
post and initial value will be use State
2:33
hook we'll be using empty array and
2:37
secondly we'll be also be having a
2:38
Boolean parameter just to keep track
2:41
whether the loading of post has been
2:43
started or not so initial value will be
2:46
true so by default we will show this
2:48
loading screen to the user that the post
2:51
are coming so when the post are about
2:53
ready then we'll change this value from
2:55
True to false so now what will happen we
2:59
will Bas basically fetch the
3:02
post so now for fetching the post we'll
3:05
be using this hook use
3:08
effect which is a react CHS hook which
3:11
executes whenever you load your
3:13
component for the very first time so
3:14
inside this use effect hook we will
3:17
fetch the data and for this we will make
3:19
a custom function which I will call this
3:22
as fetch post so the prime job of this
3:26
function is
3:27
to actually get the post from the Json
3:31
placeholder API so I will just make this
3:36
function fetch post and it will be a
3:39
async function
3:41
and inside this function we just need
3:48
to inside your TR catch
3:57
block so if any sort of error take place
4:00
we can console log the error and right
4:03
here we will make a simple fetch call a
4:07
wait Fetch and here you need to paste
4:10
address of the rest API so I will say
4:12
Json
4:13
placeholder typo typo
4:18
code
4:20
and.com
4:23
slost so this will return the response
4:25
to us and we just need to convert this
4:27
response to Json so await response resp
4:30
Json and now we'll be getting our data
4:33
so now we need to set this data so set
4:37
post the
4:41
data so in this way you can console log
4:46
of
4:50
data so after this we can uh simply hide
4:55
the loading screen so we can simply set
4:59
the load
5:00
to
5:02
false so now what happens if you check
5:06
uh if you go to this
5:09
application and see the console you will
5:12
see this data will be returned to us
5:15
each object is containing these
5:17
properties and now if I want to show
5:21
this inside of a
5:23
jsx we will come to the jsx part right
5:26
here and right here
5:32
we
5:36
actually Loop through all the
5:39
post and for each
5:43
post we basically have this component
5:46
which is lazy load it comes from this
5:49
package so what it does this
5:53
component it actually takes some
5:55
parameters first is the key parameter so
5:57
this will be the post ID secondly it
6:00
takes the height of the lazy load I will
6:04
put five and the offset as well five
6:08
these two parameters are related to The
6:10
Lazy load component this simply means
6:12
that how many what is the height of the
6:15
lazy load and the offset of lazy load
6:18
and also placeholder so inside this
6:21
placeholder text you can simply show to
6:24
the user that the post is
6:27
loading loading post
6:30
like
6:31
this so inside this you can actually
6:34
have
6:37
your
6:39
actual post displayed which will contain
6:43
actually your image
6:45
this and the H H3 tag and the heading
6:50
and the body of the post so all these
6:52
three properties we will display it
6:54
inside
6:55
this so
6:58
post I ID and this is your post ID post
7:02
title post body so if you refresh now
7:05
you will see
7:06
automatically now inside using this lazy
7:09
load component as we are scrolling all
7:11
the data is not loaded you can see all
7:14
the data is not loaded as we are
7:16
scrolling down the page the data is lazy
7:20
loading dynamically it is loading so in
7:23
this way you can make your websites very
7:25
effective in SEO friendly websites you
7:28
and it will ALS also preserves a lot of
7:31
Network Internet bandwidth as well
7:33
because you are not loading all the
7:35
website at once you are splitting the
7:37
content into multiple sections and then
7:39
as the user Scrolls down then the data
7:42
is coming so in this way you can
7:44
configure this lazy load technique
7:45
inside react CHS using this package
7:48
react lazy load it's a very minimalistic
7:52
package and it actually takes a very
7:54
less time to configure it so once you
7:56
configure it it becomes very much easy
7:59
so so thank you very much for watching
8:01
this video all the source code will be
8:02
given in the description and also do
8:05
check out my website as well free mediat
8:08
tools.com uh which contains thousands of
8:11
tools regarding audio video and image
8:14
and I will be seeing you in the next
8:16
video
#Computer Education
#Educational Software
#Other