Tipos para referencias y observadores

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"/>
}

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

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"));

Este curso es extremadamente espectacular