No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

2 D铆as
22 Hrs
30 Min
0 Seg

Tipos para referencias y observadores

9/16
Recursos

Aportes 15

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

驴 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 鈥極bservable鈥

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.

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

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.
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

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