React JS Infinite Scroll | React Interview Questions | Machine Coding Round

#reactjs #scroll #beginners
Welcome! In this video, we'll show you how to add infinite scroll with React JS. Infinite scroll is a mechanism that dynamically loads data as needed, ensuring optimal performance by avoiding critical issues. This feature is especially common in social media applications, but it can be intimidating to set up.

We'll break down the process, making it clear that setting up infinite scrolling is easier than it seems. Infinite scrolling is essentially a form of pagination that doesn't require users to click a button. Instead, we hook it up to the scroll event.

To make this efficient, we'll use the IntersectionObserver API, which checks when the last element of our list is loaded without compromising performance. Join us to learn how to seamlessly implement infinite scrolling in your React applications!

This video focuses on
- How to Add Infinite Scroll in React JS
- How to use React Infinite Scroll Component via npm
- How to achieve lazy loading of content in react js
- How to show loading while lazy loading infinite scroll content
- How to show end message once all data is lazy loaded into infinite scroll
- How to add infinite scroll in whole page or window
- How to add infinite scroll in a small div or any react container component
- How to restrict infinite scroll into a specific height
- How to control infinite scroll using javascript
- How to mimic API behavior on page change or user reaches to end of infinite scroll
- How to add data into infinite scroll dynamically
- Lazy load react example using React Infinite Scroll Component
- Load more content on page end infinite scroll
- How to check and set infinite scroll has more content prop or show that all data is loaded into the infinite scroll component of reactjs

This video contains this context:

React infinite scroll
infinite scroll in react js
react js intersection observer
intersection observer react js
react js intersection observer infinite scroll
react js infinite scroll
Machine Coding Round
react interview questions
frontend interview questions
react infinite scroll
infinite scroll react
react infinite scroll
create infinite scroll react
infinite scroll react hooks
feature: infinite scroll in react
infinite scroll in react js through array of objects
intersection observer
js intersection observer scroll
intersection observer react
infinite scrolling
infinite scrolling in react
intersection observer react for navigation
intersection observer api react
intersection observer react
intersection observer in react js
react
infinite scroll react hooks
intersection observer react
react js intersection observer
javascript
intersection observer react
intersection observer js
infinite scroll in react js
infinite scrolling
infinite scrolling with react
infinite scroll react js
infinite scrolling react
react js infinite scroll
javascript infinite scroll
create infinite scroll javascript

[kevloski]

It's just a suggestion that it'd be plus if you had your coding font style normal instead of it being italic. It's making it a little complicated for me as well as probably for viewers.

[rog]

Great tutorial!
1 question, let's say you hit end and there are no posts left (total: 0), so the user is at end and loading state is false, it will keep calling the api as it is in viewport? How would you tackle this situation? 1 is that you create a state and check for total and add into the condition that if total > 0 && !loading, but what if in db the total keeps changing frequently?

[godspeed-rt]

What if the api doesnt have the parameter of skip?? how can we do it then?? BTW thanks for letting me know about observer