Cómo crear el hook useFetch con TypeScript #reactjs #typescript

Domina el hook useFetch en React y TypeScript. ¡Aprende a crear hooks genéricos y mejora tus habilidades en el desarrollo de componentes!

Hoy os traigo un vídeo súper interesante si os interesa aprender cómo trabajar con React y TypeScript. El objetivo será crear el hook useFetch empleando este lenguaje pero con una característica especial que lo distinguirá de su equivalente en JavaScript: será genérico.

Declarar el hook useFetch que vamos a desarrollar como genérico nos permitirá tipar el valor de retorno de la llamada, de modo que podremos sacar todo el partido al sistema de tipado de TypeScript.

Además, veremos también cómo podemos escribir componentes para que también acepten propiedades genéricas.

Un vídeo como ves súper completo si quieres seguir aprendiendo sobre React, TypeScript y por supuesto hooks.

💛 ¡Espero que os guste!

[kikevanegazz]

Excelente vídeo! 🎉 muy muy claro, y didáctico. Gracias!

[jhersoncohecha]

Muchas gracias, estoy empezando con React y este video cae perfecto

[kikevanegazz]

Minuto 3:51 no es que TS sepa inferir el estado, sino que lo puede inferir porque lo definiste con un valor inicial. Y de hecho, sería preferible la inferencia cuando declaramos valor inicial; y más bien declararlo cuando queramos ser explícitos con los datos que vamos a recibir y popular en ese estado.

[javicrespo]

Muy interesante el video Gerardo, me quedo con la duda de saber cómo hacer otro fetch tras la accion de un usuario. Muchas gracias!!

[maduenox]

🤯🤯🤯 me voló la cabeza con los genéricos no los conocía. De 10 el vídeo, 🎯

[dodo]

Videazo!, queremos más de esto Gerardo!

[rafamossetto]

Buen video, estaria bueno otro video viendo mas a profundo ejemplos con typescript y los generic types

[carlosalejandromendozamend]

yo uso una api privada que me exige una key y el host en el header, como podria arreglar el hook para que esa me funcione?

[spancavil]

Excelente video Gera!!!
Pregunta minuto 7 que diferencia habria si setteo el state: setFetchState({...fetchState, state: "loading"} ... o sea sin usar el oldValue?

[Grishopping]

Saludos amigo... (se que podemos transcribirlo) pero como en el video comentas que comparte el codigo en 15:20) donde esta el enlace?? NO lo veo, , , , si lo tienes a la mano y puedes compartirlo se te agradece, , , ,

[juanburns]

Muy bueno, sería como un reactQuery casero, viendo así como funciona por dentro, vi la publicación en linkedin y vine acá, saludos y gracias por el aporte!.

[finikitometal]

Buen vídeo. Había estado usando prácticamente igual TS que JS entonces no terminaba de ver las ventajas a parte de ahorrar algún error. Sin embargo, no me termina de quedar claro la diferencia entre type e interface. He leído al respecto y parece que son intercambiables. Pero usas para User interface y para UserResponseApi type. A qué se debe esto?

[ferramos]

Buen video!!
Podrías explicar también cómo sería volver a realizar una petición a ese useFetch tras una acción del usuario.
Gracias!