En un artículo anterior os comentaba cómo funciona la API Intersection Observer y la forma en que podemos emplearla para conseguir que nuestras imágenes carguen de forma lazy:

Hoy os quiero mostrar el modo en que podemos integrar esta API con React empleando para ello un custom hook de modo que siempre que podamos reutilizarlo tantas veces como queramos. Así que sin entretenernos más, ¡vamos a verlo!

Definición del useObserver hook

Con el objetivo de integrar la API IntersectionObserver crearemos un custom hook con las características siguientes al que denominaremos useObserver .

Como argumentos recibirá un objeto que representará las opciones que pasaremos al constructor de la API Intersection Observer. Recordad que estas opciones tenían el siguiente aspecto:

const options = {
  root: document.querySelector('#main-container'),
  rootMargin: '10px 0px', // like css property
  threshold: 1.0
}

Por otra parte, el hook useObserver devolverá lo siguiente cuando lo ejecutemos:

• La instancia creada de la clase IntersectionObserver .
• Un método que nos permitirá establecer las imágenes que queremos que observe.
• El objeto entries que se devuelve en el callback de IntersectionObserver de cara a que podamos emplearlo para cargar de forma lazy las imágenes.

Como podéis ver estamos recurriendo a los hooks useState ,useEffect y useRef para definir nuestro hook encargado de observar elementos:

• setElements , que devolveremos en la línea 26 nos permitirá establecer qué elementos queremos observar mediante el método observe de la API Intersection Observer.
• entries , procedente del callback de Intersection Observer, lo devolveremos de modo que podamos realizar posteriormente la carga lazy de las imágenes.
• observer lo estamos declarando mediante el hook useRef de modo que podamos acceder al valor actual en todo momento del objeto observer . Los motivos de declarar la variable observer pueden no resultar tan evidentes de primeras por lo que os aconsejo leer los dos siguientes artículos para entederlos:

• El hook useEffect se encargará de crear una nueva instancia de IntersectionObserver y observar los elementos cada vez que se produzca un cambio en los elementos (que serán modificados mediante la función setElements ) o en las opciones pasadas como argumentos al hook.
• Finalmente, dentro de useEffect devolveremos una función que se encargará de desconectar el observer cuando el componente que emplea el hook se desmonte.

Usando el hook useObserver

A continuación vamos a ver cómo podemos emplear el hook que acabamos de crear. Para ello, definiremos un array de imágenes las cuales cargaremos de forma lazy a medida que hacemos scroll.

El código que empleará useObserver es el siguiente:

En la línea 7 estamos definiendo el array de imágenes que queremos cargar de forma lazy.

A continuación, invocamos el hook useObserver para obtener los siguientes elementos:

• La instancia observer que emplearemos más adelante para dejar de observar aquellas imágenes que ya han sido cargadas.
• El método setElements obtenido desde el hook useState de cara a que podamos establecer los elementos a observar por el hook useObserver .
• El array entries , devuelto por el callback de IntersectionObserver y que contendrá las imágenes observadas y el estado de la intersección. Este array cambiará cada vez que la API detecte una intersección

En las líneas 18 a 27 ejecutaremos la carga asíncrona de imágenes cada vez que se produzca un cambio en el array entries gracias al hook useEffect. Como veis, este código es muy similar al que empleamos en el anterior artículo: comprobamos la propiedad isIntersecting de cada objeto dentro del array y si es así modificamos su atributo src por el almacenado en el atributo data-src . Además, emplearemos el objeto observer devuelto por el hook para dejar de observar esa imagen que ya ha sido cargada.

Finalmente emplearemos otro hook useEffect para obtener todas aquellas imágenes que hayamos marcado con la clase lazy y pasárselas al hook useObserver mediante la función setElements .

Con esto, si ejecutamos el proyecto veréis como las imágenes comienzan a cargarse de forma lazy pudiendo reutilizar para cualquier otro propósito el hook useObserver .

Repositorio

Si os apetece trastear un poco más con este hook os dejo el repositorio con el código para que le echéis un vistazo.

Conclusiones

Espero que este artículo os haya servido tanto para ver cómo podemos aplicar la API Intersection Observer como para ver la creación de un custom hook desde cero.

Además, os recomiendo que echéis un vistazo a los enlaces que os he dejado antes donde se explica la razón de usar el hook useRef para almacenar el objeto observer dentro del hook, seguro que algo nuevo aprendéis!

Referencias

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇