Implementación de onLazyLoad en React con TypeScript

Contenido del curso

Introducción

Tipado en React

React y el DOM

Configuraciones avanzadas

Próximos pasos

16
Conclusiones del curso de TypeScript con React
01:32 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:04

Implementación de onLazyLoad en React con TypeScript

Curso de React.js con TypeScript

Clase 12 de 16

Clase 12 / 16

Recursos

¿Qué son las nuevas propiedades de los componentes en React?

Cuando se trata de desarrollar componentes en React, la extensión y personalización de funcionalidades a menudo desempeñan un papel crucial. Este artículo explora el escenario en el que introducimos una nueva propiedad en nuestro componente, llamada onLazyLoad, que agrega una función lista para ejecutarse cuando una imagen se carga en el viewport. Este concepto trae consigo retos emocionantes y oportunidades de aprendizaje en JavaScript y TypeScript.

¿Cómo se implementa la funcionalidad onLazyLoad?

Este desafío consiste en incorporar una funcionalidad específica a nuestro componente. OnLazyLoad es una función que se activa al cargar una imagen, brindándonos el poder de ejecutar código solo cuando la imagen esté visible y cargada en el navegador.

Callback: Se debe escribir onLazyLoad como un callback sin retorno (void function en TypeScript).
Argumento único: Este callback recibe como único argumento el nodo de la imagen cargada.

Esto logra que nuestros equipos puedan interactuar con la imagen una vez que esté completamente visible y operativa, optimizando el rendimiento y la experiencia de usuario.

interface LazyImageProps {
  onLazyLoad?: (imgNode: HTMLImageElement) => void;
}

¿Cómo asegurar que onLazyLoad se ejecute una única vez en React?

El segundo reto se deriva de asegurarnos de que onLazyLoad solo se ejecute una vez. En React, puede ser común que ciertos callbacks se activen múltiples veces por diversos motivos, como múltiples renders. Sin embargo, queremos evitar la ejecución repetida que puede llevar a comportamientos inesperados.

Controlar la ejecución única: Es esencial, a través de la lógica en React, asegurarse de que onLazyLoad no se ejecute varias veces. Esto se puede controlar utilizando efectos secundarios (useEffect) con la dependencia adecuada.

import React, { useState, useEffect } from 'react';

const LazyImage = ({ onLazyLoad }) => {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    if (isLoaded && onLazyLoad) {
      onLazyLoad();
    }
  }, [isLoaded, onLazyLoad]);

  return <img onLoad={() => setIsLoaded(true)} src="path/to/image" />;
};

¿Cuáles son las ventajas de este enfoque?

Implementar estas funcionalidades nos permite:

Mejorar la eficiencia: Al limitar la ejecución a una sola vez, se optimiza el uso de memoria y el rendimiento del navegador.
Entender React más profundamente: Investigar sobre por qué React a veces permite que las funciones se ejecuten múltiples veces puede ofrecer una comprensión más detallada de sus procesos internos.
Implementar buenas prácticas con TypeScript: Forzar tipos explícitos garantiza menos errores relacionados con tipos de datos al compilar el código, contribuyendo a un desarrollo más seguro y robusto.

Estos pasos, junto con los recursos adicionales y las futuras clases sobre configuraciones avanzadas de TypeScript, realmente pueden contribuir a elevar tus habilidades en el desarrollo de aplicaciones usando React y TypeScript. Continúa explorando y aprendiendo, los retos se transforman en oportunidades cuando te atreves a investigarlos a fondo.

Frank Alberto Broche Gómez

Hace 2 años

Basandome en la solución que ya teníamos usé elo evento onLoad del elemento img el cual se ejecuta cuando la imagen se haya renderizado.

Luego con la ayuda de useRef que ya captura nuestra imagen y ina validación de que no sea undefined la función onLazyLoad ni tampoco la referencia a la imagen, ejecutamos dentro del evento onLoad la funcion onLazyLoad.

import ``React, {JSX, useEffect, useRef, useState} ``from ``"react";

type type type export ``LazyImageProps = { src: ``string``; onLazyLoad?: (image: HTMLImageElement) => ``void } ``ImageNativeTypes = React.ImgHTMLAttributes<HTMLImageElement> ``Props = LazyImageProps & ImageNativeTypes const ``LazyImage = ({src, onLazyLoad, ...imgProps}: Props): JSX.Element => { ``const ``imgRef = useRef<HTMLImageElement>(``null``) ``const ``[currentSrc, setCurrentSrc] = useState<``string ``| ``undefined``>(``undefined``) ``const ``[isImageLoading, setIsImageLoading] = useState(``true``) useEffect(() => { ``const ``FoxImageObserverCallback: IntersectionObserverCallback = (entries, observer) => { entries.forEach(entry => { ``if ``(entry.isIntersecting) { setCurrentSrc(src) observer.unobserve(entry.target) } }) } ``const ``FoxImageObserver: IntersectionObserver = ``new ``IntersectionObserver(FoxImageObserverCallback) ``if ``(imgRef.current) { FoxImageObserver.observe(imgRef.current) } ``return ``() => { FoxImageObserver.disconnect() } }, [src]);

``return ``<img ref={imgRef} width={320} height="auto" className={`aspect-square object-cover rounded-lg bg-gray-300 min-h-1 transition-all duration-300 ease-in-out ${isImageLoading ? "blur-md" : ""}`} src={currentSrc} onLoad={() => { setIsImageLoading(``false``) ``if ``(imgRef.current && onLazyLoad) { onLazyLoad(imgRef.current) } }} {...imgProps} /> }

Introducción

TypeScript con React usando Next.js

Tipado Implícito y Explícito en TypeScript

Configurar Next.js con TypeScript y Tailwind

Tipado en React

Cómo crear tu primer componente en React con TypeScript

Props en React con TypeScript sin any

Cómo tipar useState con genéricos en React

Refactorización de Tipos en TypeScript y React

React y el DOM

Manejadores de Eventos en React con TypeScript

useRef con TypeScript sin errores de tipos

Lazy loading con Intersection Observer en React

Creación de Componentes Genéricos con TypeScript y Lazy Loading

Implementación de onLazyLoad en React con TypeScript

Configuraciones avanzadas

Uso Correcto de Tipos Globales en TypeScript

Creación de Tipos Personalizados para Librerías en TypeScript

Integración de Plugins Externos en TypeScript

Próximos pasos

Conclusiones del curso de TypeScript con React

Implementación de onLazyLoad en React con TypeScript

Progreso del curso

Introducción

Tipado en React

React y el DOM

Configuraciones avanzadas

Próximos pasos

Recursos

Recursos