Masterclass

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.

José Manuel Gómez

SuscríbeteDesde 15€/mes

01:47:40

Suscríbete para ver la masterclassDesde 15€/mes

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

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

Full-stack developer, Reactionario por antonomasia y amante de los CRM y ERP.

Desde 15€/mes