Newsletter para devsEntra
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
Mira el trailer

Duración total: 01:47:40

Código descargable

Acceso 100% online

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

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:

Imagen de José Manuel Gómez

José Manuel Gómez

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

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

24€Matrículaplus15€Al mes

  • Contenido disponible 24/7
  • Audios y videos
  • Retos y desafíos
  • Todo el código descargable
  • Comunidad de developers
  • Acceso premium completo