Infinite Scroll in React | Frontend Machine Coding Question | JavaScript Interview Question - 47

[@prabhatkashyap8333]

yes true, in interview this 8 minutes question becomes 1 hr question.

[@Prveen.Sen.8302]

😂😂😂😂😂

[@Rishi-yd3ss]

Good approach. However for me, using one dummy node without contents and observing it with IntersectionObserver works well over remembering this formula. whenever this dummy node is visible or intersection I load more data, and move this dummy node towards the end.

[@guptaankit2791]

Simple & clear implementation. Thanks a lot!

[@AshutoshRai-sy2sq]

Tried using intersectionObserver
const target = document.querySelector('#target')
const container = document.querySelector(".container");
function createItem(id){
const para = document.createElement('p');
para.innerText = `Item number ${id}`;
return para
}
function addItem (count, lastIndex = 0){
for(let i =0; i{
if(entries[0].isIntersecting){
addItem(10, container.children.length)
}
})
//observing on given target......whenever this target will intersect viewport the callback function will get triggered
observer.observe(target)

[@ravikumarranjan7038]

Hi @Prashant, What happens in case in use effect I do not write the return code. what I have understood is that memory clear will not happen which can result in memory leak.

[@Learnersbucket]

Return is necessary for useEffect, that is how it is designed

[@codecrayon9120]

The infinite loop isn't going to occur because even though the useEffect() hook registers the change in count variable and runs the code asap, we have a condition inside that doesn't execute and changes the count value once again. It happens after we have scrolled to the very bottom (which is not instant)

[@kamleshnehra7527]

Well explained

[@iranna9065]

Amazing

[@amitagarwal446]

Is it what they are expecting because I seen large videos on yt for infinite scrolling

[@Learnersbucket]

Make API call on scroll end

[@webdevsingh5819]

sir, i have a quesion
Since we are using count as a dependency and then also updating it inside the same useEffect !! wouldn't it cause an infinite loop ??

[@Learnersbucket]

No, there is codepen link in the description, test the code

[@rk_modi]

I feel the intersection observer is a better approach

[@Learnersbucket]

Intersection observer is better to detect which elements are intersecting, here we can do it by simple calculation. One rule of software engineering is to keep things SIMPLE. KISS -> Keep It Simple Stupid.

[@sumanthprabhu11]

@@Learnersbucket Yeah After the KISS , then you Smooch

[@Playground-qx4jt]

We can’t apply kiss to all the places. Code should be effective & efficient as well. We need to iteration for this video, one with intersection observer , second with virtual row

[@chahatbhatia90]

@@Learnersbucket Hi Prashant, One thing I observed in your code is that you are directly updating the count state variable using "count + 50" and you've added the count as dependency in useEffect which is working fine but it might be avoided as this approach is calling the useEffect again and again on each state update and eventually removing and adding the eventListener which can be avoided if we use the functional state updates as in count => count + 50 and remove the dependency "count" as this is recommended in React Docs as well. This will not add and remove events on successive re-renders.
Please share your thoughts.

[@Learnersbucket]

@@chahatbhatia90 You can access the previous state and update, that would. be efficient too.

[@AnilPhiyak]

but this is specific to whole window what if we want to implement the same but in a component scrolling
context

[@Learnersbucket]

@@AnilPhiyak use that components ref

[@rahul191jain]

How many times scroll event be called here, I am wondering if that will impact performance. Intersection observer se kuch fayda hota kya in terms of performance

[@Learnersbucket]

You have to show case implementation of infinite scroll i.e load more as you near end. With intersection observer, you will have to check the intersection for elements.
For large list we use Virtualization -> a video on it soon

[@MayankCode-ph6sd]

Hi all, I am a Product designer and entering into front-end space, can you suggest me how can I leverage both to grow in my career.

[@Learnersbucket]

Start learning the basic of frontend from freecodecamp.org

[@MayankCode-ph6sd]

@@Learnersbucket Also I wanted to know what roles should I apply for, are there any defined roles which requires knowledge of both domains?

[@Learnersbucket]

@@MayankCode-ph6sd that you need to check out

[@MayankCode-ph6sd]

@@Learnersbucket okay, thanks a lot

[@jatin5846]

Can i write scroll height insted of offsetHeight??

[@Learnersbucket]

Calculations differ slightly, check what is the difference between scroll height and offset height

[@shubhamb6131]

Nicely explained 👏🏻

[@Learnersbucket]

Glad you liked it

[@afrozquraishi]

What if div height is 200px and I want infinite scroll in that div then how to change the existing code?

[@Learnersbucket]

Ref the div and use it instead of window.body

[@ujjawal_]

Well explained