No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Tipos para referencias y observadores

9/16
Recursos

¿Cómo optimizar imágenes con Lazy Loading en React?

La optimización de carga de imágenes es crucial para mejorar la experiencia del usuario en una página web. Implementar Lazy Loading en imágenes permite que estas se carguen solo cuando están visibles en el Viewport, es decir, la parte del navegador visible al usuario. Esto no solo acelera la carga inicial de la página, sino que también reduce el consumo de ancho de banda. En React, lograr esta funcionalidad requiere la combinación de técnicas como el uso de hooks y APIs del navegador. Vamos a explorar cómo implementarlo de manera efectiva.

¿Qué es el hook useRef y cómo se utiliza?

El hook useRef en React se emplea para interactuar con elementos del DOM durante el tiempo de ejecución. Este ofrece una referencia mutable sobre la cual podemos guardar una referencia al nodo DOM y usarla después. Aquí se detalla su uso:

  1. Importar useRef: Comenzamos importando el hook desde React:

    import { useRef } from 'react';
    
  2. Inicializar useRef: Se utiliza dentro del componente React. En este ejemplo, lo implementaremos dentro del componente RandomFox que representa una imagen.

    const nodeRef = useRef(null);
    
  3. Asociar la referencia al elemento: Utilizamos la propiedad especial ref proporcionada por React para vincular el nodo del DOM con nodeRef.

    <img ref={nodeRef} src="path_to_image" alt="Random fox" />
    

¿Cómo se configura TypeScript para useRef?

En TypeScript, definir correctamente los tipos es esencial para evitar errores. useRef acepta tipos genéricos para especificar el tipo de nodo:

  1. Especificar el tipo de elemento: Indicar a TypeScript cuál es el tipo de elemento. Para una imagen:

    const nodeRef = useRef<HTMLImageElement | null>(null);
    
  2. Inicializar con null: TypeScript espera que useRef se inicialice con null debido a cómo maneja los tipos de objetos. Esto es crucial para evitar errores de tipo:

    const imgRef = useRef<HTMLImageElement | null>(null);
    

¿Cuáles son las diferencias entre undefined y null?

Al definir tipos con useRef, es importante diferenciar entre undefined y null:

  • undefined indica que una variable no se ha definido explícitamente.
  • null es un valor definido que indica ausencia de valor.

En TypeScript, useRef debe inicializarse con null porque la referencia es un objeto mutable que cambiará cuando el elemento esté montado, y no antes. Esto es compatible con los tipos esperados.

¿Qué sigue después de configurar useRef?

Con useRef debidamente tipado y referenciado, la optimización de imágenes mediante Lazy Loading está en marcha. En el siguiente paso, se implementa la API de Intersección para observar las imágenes y cargarlas una vez que entren en el Viewport:

  1. Configurar la API de Intersección:

    • Determinar cuándo un elemento entra en el Viewport.
    • Cargar la imagen solo en ese momento.
  2. Implementación de observadores:

    • Completar este paso en React para optimizar continuamente el rendimiento.

El trabajo con useRef y TypeScript en React proporciona una base sólida para convertir elementos del DOM en componentes interactivos y escalables. Siguiendo este enfoque, se logran aplicaciones más eficientes y con mejor rendimiento visual. Experimenta con estos conceptos, sigue aprendiendo y verás cómo tu aplicación mejora dramáticamente en tiempo de respuesta y fluidez.

Aportes 17

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Tipos para referencias y observadores

Cuando trabajamos con React y TypeScript, puede que nos encontremos con problemas a la hora de utilizar referencias y observadores en nuestros componentes. Esto se debe a que, dependiendo del objeto HTML con el que estemos trabajando, necesitamos tener en cuenta ciertos conceptos para que nuestro código sea válido.

Digamos que vamos a nuestro componente RandomFox y queremos añadir una referencia con useRef().

export default function RandomFox( { image }: Props ):JSX.Element {  
  const node = useRef()

  return (
    <img **ref={node}** src={ image } className="w-80 h-auto rounded-lg" />
  )
}

Incluso si especificamos que la referencia será de tipo HTMLImageElement en el generic de useRef(), el error persiste:

const node = useRef<HTMLImageElement> ()

// Esto seguirá dando error
<img **ref={node}** src={ image } className="w-80 h-auto rounded-lg" />

La razón de este error es que el tipo de dato que useRef() devuelve por defecto es undefined, mientras que el elemento <img> solo acepta referencias de tipo null cuando no están asignadas. Por lo tanto, ambos tipos de dato no coinciden.

Para solucionar este problema, debemos inicializar la referencia con un valor nulo en lugar de dejarla sin asignar:

export default function RandomFox( { image }: Props ):JSX.Element {  
  const node = useRef<HTMLImageElement> (null)

  return (
    <img ref={node} src={ image } className="w-80 h-auto rounded-lg" />
  )
}

De esta manera, ya no recibiremos el error en el linter y nuestra referencia será válida para trabajar con el elemento <img>.
Es importante tener en cuenta estos detalles cuando trabajamos con referencias y observadores en React y TypeScript, ya que pueden generar errores difíciles de depurar. Conocer estas diferencias nos permitirá solucionar problemas con mayor facilidad y hacer un mejor uso del tipado de TypeScript en nuestros proyectos.

useRef permite crear una referencia mutable que se puede utilizar para acceder directamente a los elementos del DOM o a los componentes de React que estan representados en pantalla, y también para almacenar valores o funciones que persistan entre renderizados y actualizaciones de componentes. La diferencia entre una referencia creada con useRef y una creada con createRef es que createRef crea una nueva referencia en cada renderizado del componente, mientras que useRef crea una única referencia que se mantiene constante durante todo el ciclo de vida del componente

Me parece dificil, pero muy importante esta clase

const myRef = useRef<Type>(initialValue);

Donde Type es el tipo del valor que se almacenará en la referencia y initialValue es el valor inicial de la referencia.

En este caso, el useRef se usa para tomar el valor del elemento y conocer de la imagen, en que momento y en qué posición se encuentra dentro del viewport.

¿ Que es useRef ?
Es un Hook que te permite crear una referencia mutable que persiste durante todo el ciclo de vida de tu componente, lo que significa que no pierde su valor entre renderizaciones.

¿ Que es useEffect ?
Es un Hook que te permite ejecutar código cada vez que cambian sus dependencias la primera vez que se realiza el componente.

RxJS que pertenece a Angular usa un patrón de diseño llamado ‘Observable’

import { useRef } from "react"
type Props = {image:string}
export const RandomFox = ({image}:Props): JSX.Element =>{
    const node = useRef<HTMLImageElement>(null);
    return <img ref={node} width={320} height="auto" src={image} className="rounded"/>
}
***viewport***: parte del navegador visible.
Con la frase que me quedo de la clases que por regla de oro hay que poner el elemento con el que vamos a trabajar e inicializarlo en null.

Aunque el hook useRef se usa normalmente para tener una referencia de un nodo del DOM, no es para lo unico que funciona el hook.
Realmente el hook nos da la referencia de un objeto. Lo que significa que el valor de esa referencia no va a cambiar cuando se haga un renderizado del Componente.
Entonces si tu quieres tener una variable que no cambie durante ciertos renderizados, utiliza useRef

- **Lazy Loading**: Cargar imágenes solo cuando están en el Viewport. - **Viewport**: Área visible en el navegador. - **UseRef**: Hook en React para referenciar un nodo del DOM. - **UseEffect**: Hook para manejar efectos secundarios en componentes de React. - **Web API**: Interfaz de programación para manejar observadores. - **TypeScript**: Lenguaje que permite tipar variables y componentes en JavaScript, mejorando la seguridad del código. - **Componentes**: Elementos reutilizables en React que manejan su propio estado y lógica. Este resumen concentra los conceptos clave de la clase sobre la optimización del manejo de imágenes en React con TypeScript.

Vayamos por partes.
Dentro del componente de RandomFox se tiene una constante derivada del uso de useRef(). Este hook, como se puede ver en su definición, se nos indica que requiere de un valor inicial T o null (con T se refiere a cualquier tipo de dato).

function useRef<T>(initialValue: T|null): RefObject<T>;

Más adelante nos encontramos que la constante node se ocupa en el atributo ref de la etiqueta <img /> y esto básicamente indica que se colocara como referencia guardada en node la propia<img /> que al inspeccionarla podemos ver que typescript la trata como un objeto de tipo HTMLImageElement.

return <img ref={node} width={320} height="auto" src={imageURL} className="rounded" />;

Tomando lo anterior en cuenta ahora sabemos que el valor inicial que necesita y devolverá useRef() debe ser HTMLImageElement o null.
Esto se puede verificar realizando un pequeño trick donde los siguientes ejemplos son funcionales.

// initialValue = null
const node = useRef<HTMLImageElement>(null);
// initialValue: HTMLImageElement
  const node = useRef<HTMLImageElement>(document.createElement("img"));
y aquí es cuando entendemos mejor por qué el valor null es muy diferente al valor undefined
El `null` en el constructor de `useReference` si tiene sentido. Al inicializar con `null` estamos indicando que la referencia que estamos creando todavía no está asociada a ningún elemento del DOM. Se podría pensar que se esta creando una referencia al elemento `null` .
Everyone remember that the default value that is assign inside JS when you dont assign a value is undefined and that null is a value that to be present need to be assigned.

Este curso es extremadamente espectacular