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.
GitHub Repository: github.com/ashutosh1919/react...
clsx: www.npmjs.com/package/clsx
Follow me on below social media,
Discord: / discord
LinkedIn: / ashutosh1919
Github: github.com/ashutosh1919
Behance: www.behance.net/devsense19
Dribble: dribbble.com/ashutosh1919
Facebook: / laymanbrother.19
Instagram: / developer_sense
KZbin : / devsense19
Patreon: / devsense
To know more about me,
Checkout my website ashutoshhathidara.com/
Drop me mail if you need any help,
[e-mail]
#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

[@jeromelabsan1428]

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.

[@akshaybhaskare6615]

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

[@saurabhjoshi9319]

Great lecture

[@shrutibutte6607]

sir , can i use this code for pagination also

[@mohikhathidara4467]

wow

[@itachi-senpaii]

Thank you so much ...

[@asadullah7324]

thank you so much

[@mohikhathidara4467]

Gr8

[@akshatgarg6249]

Amazing

[@DevSense19]

Thank you! Cheers!

[@sekharsekhar611]

nice video bro

[@charlestran7000]

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.

[@sowmocoding5740]

Put it in a function then call in useEffect (maybe)

[@Mike37373]

hi, can you do this with Redux Toolkit?

[@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.

[@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.

[@DevSense19]

Disable interactive component when all the elements get rendered

[@sailesh_nama]

@@DevSense19 sir what you mean by interactive component the div which maps? And to disable it?

[@yuvrajchaudhari7365]

@@DevSense19 can you please elaborate that how to disable interactive component when all the elements get rendered?

[@yuvrajchaudhari7365]

@@sailesh_nama did you get it?

[@sailesh_nama]

@@yuvrajchaudhari7365 noo i tried but wasn't possible.

[@fewart]

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

[@Gaurav-pc7fj]

If currentPage !== images.length + 1 Use this it'll stop loop

[@asifurrahman5436]

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?

[@asifurrahman5436]

so to answer to my question is you can use _page and _limit in api url to control the limit of the page data

[@yusufislamzengin]

​@@asifurrahman5436 what must i do for responsive websites? I cant know how many elements on the users screen.

[@Mehdiijki]

can you please tell me how to stop infinite loop of data i only want the data from the api? thank you

[@harshpandey439]

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

[@DevSense19]

Hey Harsh! There is already a video on my channel: kzbin.info/www/bejne/lWe9Zpl8adtpd8U

[@mehwishahmed586]

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 ?

[@san29sh]

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

[@DevSense19]

Just insert an if condition to stop rendering once you iterate all items

[@konidoniravirr6580]

@@DevSense19 SIR PLEASE PLEASE CAN YOU WRITE A CODE HERE, YOU ARE MY GOD SIR, PLEASE WRITE A CODE HERE TO STOP LOOPING😭😭

[@Mehdiijki]

Hello did you solve the looping problem ?? if yes please how?

[@konidoniravirr6580]

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.

[@kemalaydeniz1535]

Did you find a way to stop looping?

[@tinkugupta1]

Design sense 😂😂