La CLAVE de los CUSTOM HOOKS en React. ¡Te enseño POR QUÉ tienes que aprenderlos y cómo CREARLOS! 🔥

midudev

Resumen

En este vídeo aprenderás a crear Custom Hooks en React para separar la lógica de negocio de la parte visual de tus componentes. El autor explica cómo evitar la repetición de código mediante la extracción de estados y funciones en funciones reutilizables que comienzan con 'use'. Verás paso a paso cómo refactorizar un contador simple, logrando que tus aplicaciones sean mucho más limpias, escalables y fáciles de testear al desacoplar el manejo del estado del marcado UI.

Capítulos

  1. 0:00Objetivos del tutorial
  2. 0:14Identificando la repetición de lógica
  3. 0:43Estructurando el custom hook
  4. 0:51La regla de nomenclatura en React
  5. 1:17Definición de operaciones del estado
  6. 1:46Limpiando el componente principal
  7. 2:03Definiendo el retorno del hook
  8. 2:34Implementación del hook en la UI
  9. 3:02Ventajas del desacoplamiento
  10. 3:31Escalando con múltiples instancias
  11. 4:27Beneficios en testing
  12. 4:35Añadiendo valores iniciales

Temas tratados

  • Introducción a Custom Hooks
  • El problema de mezclar lógica y vista
  • Convención de nombres en hooks
  • Extracción de la lógica del estado
  • Retorno de datos y encapsulamiento
  • Desacoplamiento de componentes
  • Reutilización de hooks múltiples
  • Personalización con parámetros

Extracto de la transcripción

en esta clase te voy a enseñar cómo crear un custom hub de react desde cero y te voy a explicar por qué son interesantes que aportan en tu aplicación y cómo te ayudan a hacerlas más mantenibles y escalables cuál es el problema entre comillas que te contaba no es un problema como tal pero la lógica y la visualización están juntas imagínate que yo ahora quiero hacer otro contador si yo quisiera hacer otro contador que ocurriría tendría que repetir este uso este y podría hacer esto no tendría aquí por ejemplo counter 2 y tendría que volver a repetir todo esto esta gestión del estado que tenemos aquí pero lo que puede hacer en lugar de eso es mirar mi contador y decir cómo puedo extraer la lógica de mi contador de forma que sea reutilizable y cuál es la lógica de mi contador pues vamos a crear aquí una función que le vamos a llamar yus counter importante los castón y todos todos tienen que e…