Use Infinitive Scroll in React Like a PRO
--
Hello everyone, I wanna talk about fetching data with an infinitive scroll in React. This week #SundayTechMusings is using infinitive scroll with a throttle function.
It is always valuable to share experiences and best practices when it comes to utilizing effective methods, and we, as Jotform, have found success using the infinitive scroll functionality. In this article, I will delve deeper into the method and explore how it has been implemented within Jotform’s processes. Additionally, I will share Jotform’s experience with the method, including any challenges faced, key learnings, and notable outcomes. By sharing these insights, I hope to provide valuable information to readers who are interested in learning more about the method and its potential usage.
Why do we need to use Infinitive Scroll?
When we fetch data from the server, usually we have to use pagination/infinite scroll. Because if we try to fetch all of the data, it can cause performance issues. We usually prefer infinitive scroll over pagination because of UX.
Infinite scrolling is a listing-page design approach that loads content continuously as the user scrolls down. It eliminates the need for pagination — breaking content up into multiple pages.
In the above code, I’ve shown how to fetch data with infinite scroll. When we scroll down, we will check the scroll position and if scroll near to bottom we call the fetch function.
But when the user scrolls down fastly, it can execute this function more than once. For example:
To prevent this I want to add a throttle function.
What is the throttle function?
Throttling will simply prevent a function from running if it has run recently, regardless of the call frequency. It works like debouncing.
Both debounce and throttle are techniques used to limit the frequency of function calls, especially when dealing with user events such as scrolling, resizing, or typing. The main difference between debounce and the throttle is how they control the frequency of function calls.
Debouncing is a technique that ensures that a function is called only after a certain amount of time has passed since the last invocation. In other words, if a function is called repeatedly within a short amount of time, debounce will wait until the calls have stopped for a specified duration before invoking the function. Debouncing is useful for scenarios where you want to trigger an action only after a user has stopped a continuous activity, such as typing.
Throttling is a technique that limits the rate at which a function can be called. It ensures that a function is called no more than once every specified interval of time. In other words, if a function is called multiple times within the specified interval, the throttle will ignore all subsequent calls until the interval has elapsed, at which point it will invoke the function again. Throttling is useful for scenarios where you want to ensure that a function is called at a regular interval, such as when animating elements or handling network requests.
In summary, debounce delays the invocation of a function until a certain time has elapsed since the last call, while throttle limits the frequency of function calls to a specified interval.
So let’s add throttling to our code.
I’m using lodash library to get the throttle function but also we can write our own throttling function. In line 7 we covered fetchData function with throttle. The throttling function has 3 parameters, first one is a function to execute. The second one is time to wait for another call. And the third one is options. I wanted to add {trailing: false} , because I wanted to prevent executing code at the end. So that’s a better approach.
But I want to improve also this code. And show the PRO version :)
WithuseEffect dependencies changes, now we ensure that when data is fetching, it won’t fetch again.
I think that's all for this week. For more articles, you can follow me. I publish hack techs every Sunday with the #SundayTechMusings tag.
Happy hacking! :)
My Linkedin: https://www.linkedin.com/in/%C3%A7a%C4%9Flayan-yan%C4%B1ko%C4%9Flu-a6b42b13b/
