The essence of web development is to present Data smartly and efficiently, we will always continue to encounter the task of “displaying an array of items”.
But what happens when the Data is large and heavy and also appears in several different variations in the application (grid, table, etc)?
In this article we will learn one of the ways to solve this common problem, by using these tools:
- IntersectionObserver
- Custom Hook
First, we are going to understand how the observer integrates into a standard component in React, and then we will see how we export the same operation for global use in our application.
Intersection Observer API
The IntersectionObserver interface provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.
“Considered more performant than listening for scroll events and the callback will only fire when the element we’re observing meets the specified threshold, instead of every time the scroll position is updated”
Let’s simplify the logic highlighted below into thinking steps!
- We will create a new object from the IntersectionObserver Class whose constructor function receives two arguments:
- A callback function with which you can extract all its entries. For example the value “isIntersecting”, to which we will place the state of our component. By doing this, we can manage the heavy Data inside the thumbnail/card element.
- An optional configuration object which customizes the observer.
We will import useRef, which will be used as a reference to the element.
that we will wrap in our “observe()” method.Finally, we will import useEffect, to manage the life cycle of the component, as soon as the component is displayed in the DOM, we will activate the observer, and when it stops being displayed, we will disconnect from it.
Let’s be honest here, we all know the importance of clean and readable code, and what’s better than one line of code that says a lot?😉
For the ability to export all this logic to more components, we will create a custom hook with these two rules:
- Write a function with the word “use” at the beginning to distinguish it from a regular util function.
- The function must use at least one hook from React.
In this case, the whole function revolves around our observer.
In order for it to become generic, it should receive a RefObject argument.
Our intention is to associate the same action with another element.
And we also added the option to receive another object-type argument that will be responsible for the configuration.
Finally, as you can see, we want to use the isIntersecting value, so we will associate it with the state and return it at the end of the function.
“Handle the heavy lifting of your web page”
In order to prepare for the increase in capabilities of our hook, we should:
- put in the dependency array (found at the end of the useEffect) the variables that may be relevant for future use, because we may choose that they can trigger the useEffect again, but at the moment they do nothing, because they do not change.
- Return an object, even if we currently only need one. NOTE: You can also return an array as useState does, by doing so you give yourself the option to choose whatever name that fits your needs.
“Solve your future problems with custom hooks”
As you can see in the video above, with only one **GET request **we can display a large number of items, and fill each element with Data, in a selective manner.
In conclusion, our DOM has no problem accepting a lot of elements, the thing that burdens him is the Data we add to each of these elements, therefore if we are alert to the exposure of each item in the array by using an observer, we can create a “gatekeeper”, who renders a piece of the heavy content to our screen, each time it crosses the threshold.
In doing so, we will create a more inviting and pleasant experience for the user.
“There is no need to fill an element with Data before the user can see it..👀”
I hope this helps. Please comment and share your thoughts and custom hooks.
Top comments (0)