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.

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

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.