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
Guía práctica sobre Hooks de React: problemas comunes (closures, dependencias, bucles), rendimiento (memo, useRef), fetching (Axios, React Query) y buenas prácticas de herramientas.
Qué vas a aprender
- 1Uso correcto de useState y actualización funcional para evitar closures
- 2Dependencias de useEffect y prevención de bucles infinitos
- 3Manejo de fetching y cancelación con Axios y AbortController
- 4Uso de React Query (TanStack) para cache y fetch eficiente
- 5Memorización con useMemo, useCallback y React.memo para rendimiento
- 6Diferencias entre useEffect y useLayoutEffect para evitar flickering
- 7Uso de useRef para referencias, evitar renders y almacenar estado mutable
- 8Diseño de estado: separar estados y uso de useReducer para lógica compleja
- 9Buenas prácticas de herramientas: VSCode, extensiones, ESLint y EditorConfig
- 10Router avanzado: lazy, Suspense y manejo de modales con location state
Descubre algunos fragmentos
¿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
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]
Podrás ver a:
José Manuel Gómez
Desde 15€/mes
Este contenido es para suscriptores
Accede a “Hooks de React: Cómo usarlos de forma correcta y crear mejores componentes” y a todo el catálogo premium
Desde 15€/mes · Matrícula: 24€ (solo tu primera vez)
Suscríbete