Tipar el estado en React con TypeScript es el primer paso para escribir componentes seguros y predecibles. Aquí aprenderás cómo agregar tipos al hook useState usando genéricos, evitar inferencias riesgosas y manejar arrays de strings dentro de un componente que renderiza varias imágenes aleatorias.

¿Por qué tipar el estado de React con TypeScript?

Cuando trabajas con useState, TypeScript intenta inferir el tipo a partir del valor inicial. Esa inferencia funciona, pero deja la puerta abierta a errores silenciosos cuando el valor inicial no representa bien lo que vendrá después.

Imagina que inicializas el estado con un array vacío. TypeScript no tiene forma de adivinar qué irá adentro y marca cada elemento como tipo never. A partir de ahí, cualquier intento de iterar o renderizar se rompe. Por eso conviene ser explícito con los tipos desde el inicio.

¿Qué pasa si no tipas useState? TypeScript infiere el tipo según el valor inicial. Si inicias con un array vacío, los elementos quedan como never y no podrás agregarles datos sin errores.

¿Cómo declarar useState con un array de strings?

El componente RandomFox originalmente renderizaba una sola imagen. Para mostrar varias, necesitas un estado que sea un arreglo de URLs. La declaración inicial se ve así dentro del componente:

tsx const [images, setImages] = useState([ 'https://randomfox.ca/images/1.jpg', 'https://randomfox.ca/images/2.jpg', 'https://randomfox.ca/images/3.jpg', 'https://randomfox.ca/images/4.jpg', ])

Con valores presentes, TypeScript infiere que images es un array de string. Eso ya te protege de pasar un número o un objeto por error. Pero la inferencia depende del contenido inicial, y eso es frágil.

¿Qué son los genéricos en TypeScript y cómo se aplican a useState?

Los genéricos son esos paréntesis angulares que aparecen junto a una función o tipo. En la definición de useState dentro de React, verás algo parecido a useState<S>(initialState: S). Esa S representa el tipo del estado y se propaga al valor que retorna y a la función setState.

Puedes pasarle el genérico tú mismo para que TypeScript no dependa del valor inicial:

tsx const [images, setImages] = useState<string[]>([])

También es válido escribirlo como Array<string>. No hay diferencia técnica, solo de estilo. Lo importante es que ahora setImages solo aceptará arrays de strings, sin importar lo que pase después.

¿string[] o Array<string>? Las dos formas son equivalentes en TypeScript. Elige la que use tu equipo en su guía de estilo.

¿Cómo renderizar un array de imágenes con map y key?

Una vez que tienes el estado tipado, puedes iterar con map y renderizar un componente RandomFox por cada URL:

tsx {images.map((image, index) => (

<div key={index} className="p-4"> <RandomFox image={image} /> </div> ))}

Envolver cada imagen en un div con padding evita que queden pegadas visualmente. El atributo key es obligatorio en listas de React y ya viene tipado por defecto, así que TypeScript no se queja.

¿Qué uso como key, la URL o el index?

La key debe ser única. La URL podría repetirse porque las imágenes son aleatorias y existe probabilidad de colisión. El index, en cambio, siempre es distinto dentro del array. Por ahora, usar el índice funciona como solución temporal, aunque no es la práctica recomendada cuando la lista cambia de orden.

¿Qué errores evitas al tipar el estado de forma explícita?

Declarar el genérico de useState protege tu código en escenarios reales:

• Evita que un compañero agregue por error un número o un objeto a un array que debería ser solo de strings.
• Bloquea bugs que solo aparecerían en producción cuando el código intenta operar sobre tipos incompatibles.
• Permite que el editor te dé autocompletado correcto sobre los métodos de cada elemento.
• Hace explícita la intención del desarrollador, lo que mejora la lectura del código.

La regla que vale repetir: cuando puedas elegir entre dejar que TypeScript infiera o decirle exactamente qué esperas, sé explícito.

Conceptos y datos clave de la clase

• useState con genéricos [02:30]: el hook acepta un parámetro genérico que define el tipo del estado y de la función setState.
• Tipo never en arrays vacíos [01:10]: TypeScript marca como never los elementos de un array vacío sin tipo explícito.
• Dispatch y SetStateAction [00:55]: el tipo que React asigna a la función setState y que espera el mismo tipo declarado en el genérico.
• Inferencia de tipos [03:20]: TypeScript deduce el tipo a partir del valor inicial, útil pero arriesgado en estados que cambiarán.
• Sintaxis string[] vs Array<string> [05:40]: dos formas equivalentes de declarar arrays tipados.
• key prop en listas [03:50]: viene tipado por defecto en componentes de React, se recomienda valor único como index temporal.
• Cuatro imágenes pseudoaleatorias [04:15]: el ejemplo práctico renderiza cuatro foxes distintos al recargar la página.

¿Has tenido problemas con genéricos antes? Cuéntame en los comentarios cómo los entendiste y qué ejercicio te ayudó a hacer clic con ellos.