React Lazy Loading | Infinite Scrolling With React | Ashutosh Hathidara

Lazy loading components in ReactJS are very popular in today's data-driven world. In this video, you will learn lazy loading absolutely any React Component.

Follow me on below social media,

To know more about me,

Drop me mail if you need any help,

#reactjs #lazyloading

Timestamps:
00:00 What is Lazy Loading?
01:05 Project code structure
03:35 Custom Hook useLazyLoad
05:44 Creating Lazy Loading feature

[fewart]

Hello. Thank you for tutorial. Could you please say how to tern OFF the infinity option?

[jeromelabsan]

Sir, Good day! I have a question. Is it okay to implement that in my development project. Does it not conflict with other JS in my page.
the data to be needed for infinite scrolling is like a facebook posts. Loaded of scripts. I appreciate your immediate answer. Thank you.

[harshpandey]

Sir one request please make a video on how to make a card which got blur background on hover with a text oni t like we are making a project card on hover which got blurred and a button appears on its center to view it live

[asifurrahman]

okay so you created 3 pages of data slicing the whole data array into three parts, which mean each page has 6 data. But in the real world we don't know how much data will be in the api data, especially if the api does not contain pages. So in that case how can i divide our pages?

[Mike]

hi, can you do this with Redux Toolkit?

[sailesh_nama]

Sir if I don't need infinite but only the available JSON data to load what changes should I do. Like in your case if 6 loads first and then the other 12 should load if scrolled that's it.

[konidoniravirr]

Sir, can you please write a code here to stop looping, please sir iam literally now in tears for this video..
iam searching for this for about 5 days. you deserve a millions of subscribers.

[akshaybhaskare]

Sir how can we do this with useEffect, instead of of ongrabdata function can i write useeffect

[owlergaming]

good day, sir. Can you do a video about using Lazy loader in uploading an image? Like the image will be blurred out when it's still uploading.

[sansh]

very useful video for lazy loading, it is very helpful me if you tell me how to stop looping after last product.

[mehwishahmed]

Can you please guide me i don't want infinite looping i just want to show no more data when array length arrives how can i do that ?

[charlestran]

Sir, in my case, I want to use this for my search result (images in onGrabData is an useState variable and would change overtime). But it seems like data here does not change whenever images change (it just take the first time search result). I tried to call useLazyLoad inside a useEffect hook whenever images changes but it does not work because a hook cannot be called inside useEffect. How do I fix this problem? Thank you.