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

JavaScript Interview Question - 47 | In this video, we will see how to solve a medium-difficulty problem asked in frontend engineer interview to SDE1, SDE2, and SDE3.

It is a classic machine coding round question where you are asked to demonstrate the working of Infinite scrolling which is a pagination technique in React. You can expect this question in Atlassian, Uber, Rippling, Flipkart, Navi, Amazon, Google, Microsoft, Meta, etc.

Loved the question? I have 120+ such solved problems in my ebook "JavaScript Interview Guide". If you are preparing for Interviews and looking for a solutions book, Get my Ebook.

Social links

[prabhatkashyap]

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

[guptaankit]

Simple & clear implementation. Thanks a lot!

[Rishi-ydss]

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.

[AshutoshRai-sysq]

Tried using intersectionObserver

const target =
const 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<count; i++){

}
}



// creating instance of intersection observer

const observer = new

addItem(10, container.children.length)
}
})


//observing on given this target will intersect viewport the callback function will get triggered
observer.observe(target)

[ravikumarranjan]

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.

[webdevsingh]

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

[rahuljain]

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

[AnilPhiyak]

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

[afrozquraishi]

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

[jatin]

Can i write scroll height insted of offsetHeight??

[amitagarwal]

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

[MayankCode-phsd]

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.

[rk_modi]

I feel the intersection observer is a better approach