Hooks de React: Cómo usarlos de forma correcta y crear mejores componentes
Si quieres dar un salto de calidad como React Developer, este curso es para ti.
Duración total: 01:47:40
Código descargable
Acceso 100% online
¿Qué aprenderás en este vídeo?
Comprende mejor como funciona el useState para evitar errores
La recetas definitivas para evitar los renderizados innecesarios
Evita las llamadas duplicadas de fetching
Tips para escribir mejores componentes
Mejora el uso React Router con modales
Evita el parpadeo con hooks
Incluye subtítulos
Descripción de la masterclass
José Manuel comparte todo lo que ha aprendido en años de uso de React.js como herramienta base en su desarrollo.
¿Qué son los hooks de React.js?
Los hooks de React son una nueva función que te permiten usar el estado y otras funciones de React sin escribir un componente de clase.
Supuso una gran revolución en la forma de escribir el código con React.js y también un gran desafío para los developers.
Algunos de los beneficios de usar hooks son:
- Puede usar el estado y otras características de React dentro de componentes funcionales
- Puedes usar hooks para evitar escribir componentes de clase
- Puedes usar hooks React para mejorar el rendimiento
Entonces, ¿cuáles son los problemas con los hooks de React?
Toda gran feature exige una gran responsabilidad.
El uso de estos hooks hace que tu código pueda ser más eficiente, pero hay que saber cómo manejarlo.
Gestionar el estado de tu aplicación puede marcar una gran diferencia en cuanto a los beneficios percibidos por el usuario, sobre todo la velocidad de carga.
En aplicaciones complejas el renderizado de los componentes sin control o una mala comunicación entre los elementos de la web puede arruinar el UX.
La gestión del estado es la clave.
Podrás ver a:
José Manuel Gómez
Explora los capítulos
1. Extensiones y configuración para Visual Studio Code [07:27]
Extensiones y configuración para Visual Studio Code
[03:05]
Extensión imprescindible 🔥
[04:22]
2. State Hook: Jugando con los cambios de estado [09:53]
State Hook: Jugando con los cambios de estado
[01:17]
Caso de uso de cambio de estado y SetTimeout
[01:25]
Cuándo se declara el valor en una closure
[01:50]
Explicación de qué sucede en el Call Stack
[00:29]
Pregunta: Qué pasa cuando quieres actualizar el estado y no lo hace? 🔥
[00:59]
Pregunta: ¿El nombre de "prev" es por convención?
[01:09]
UseEffect: Cambios recursivos que hacen explotar la aplicación
[02:44]
3. State Hook: Input no controlado [14:08]
State Hook: Input no controlado
[03:08]
Uso de useEffect y el error de la no actualización del estado
[01:58]
Ahorro en funciones costosas
[03:11]
Pregunta: ¿La reactividad la realiza siempre el useEffect?
[01:09]
Pregunta: ¿Que pasaría si usas un callback en useState?
[04:42]
4. Usando mejor useEffect [21:40]
Usando mejor useEffect
[01:45]
Tip para eliminar div innecesarios con Fragment 🔥
[02:37]
Llamadas innecesarias con fetch y cambios de estado
[03:12]
El caso del AbortController y llamadas duplicadas 🔥
[05:23]
Usando ReactQuery (TanStack Query) y custom hook
[08:43]
5. Evitando el flickering con useLayoutEffect [03:07]
Evitando el flickering con useLayoutEffect
[03:07]
6. Casos de uso del useRef [08:46]
Casos de uso del useRef
[02:57]
Tip para no forzar el renderizado 🔥
[02:13]
Detección del componente montado
[00:42]
Ejecutar una función de un hijo desde el componente padre: forwardRef
[02:54]
7. React Router y modales [06:53]
React Router y modales
[04:25]
Usando cloneElement en combinación con el modal
[02:28]
8. Memorizaciones con hook useMemo [23:09]
Memorizaciones con hook useMemo
[03:03]
Memo y las comparaciones de cambios de objetos
[03:35]
Tip para el linter usando memo 🔥
[00:36]
Otro ejemplo de solución usando bien los estados
[03:16]
Similitudes entre useMemo y useCallback
[06:07]
Pregunta: ¿Se puede utilizar TypeScript para el tipado?
[06:32]
9. Usando useReducer [12:37]
Usando useReducer
[12:37]
Descubre todo lo que puedes conseguir sucribiéndote a Web Reactiva
Contenido nuevo todas las semanas
Una comunidad de developers colegas en telegram
Desafíos y retos de programación para que mejores tus habilidades
400 horas de contenido en audio y vídeo
Entrevistas y masterclass en directo con los/las mejores profesionales
Precio
19€Matrículaplus13€Al mes
- Contenido disponible 24/7
- Audios y videos
- Retos y desafíos
- Todo el código descargable
- Comunidad de developers
- Acceso premium completo