Conversión de HighOrder Components a Custom Hooks en ReactJS

¿Cómo convertir un high-order component a un custom hook en React?

Explorar cómo convertir un componente de orden superior (HOC) en un custom hook puede transformar la manera en que manejas la lógica de tus componentes React. En esta clase, nos adentramos paso a paso en este proceso de conversión, comenzando con renombrar y modificar code en VSCode. ¡Descubre lo sencillo que puede ser!

¿Cuál es el primer paso al convertir un HOC en un custom hook?

El proceso de conversión comienza con renombrar el HOC para seguir la convención de los hooks customizados. Tradicionalmente, los HOCs inician con "with", mientras que los hooks customizados empiezan con "use".

1. Cambiar el nombre de la función HOC, por ejemplo, de withStorageListener a useStorageListener.
2. Actualizar el nombre en todas las importaciones y el archivo respectivo.
3. Visual Studio Code te ofrece la opción de actualizar las importaciones automáticamente, aceptarla facilita el proceso.

¿Cómo eliminar funciones intermedias?

Un custom hook te permite deshacerte de la complejidad de las funciones anidadas. La lógica interna puede permanecer igual, pero cambia la forma en que se manejan las devoluciones de llamada y funciones Internas:

• Elimina las funciones intermedias, es decir, no devuelvas funciones dentro de funciones.
• No necesitas recibir un componente envolvente como argumento.
• Asegúrate de identificar correctamente y eliminar las llaves sobrantes.

¿Qué se debe devolver en un custom hook?

En lugar de devolver un componente o un elemento de React, devuelve propiedades específicas que luego podrán ser utilizadas en tu componente funcional.

// Al convertir el high-order component
return <GrabComponent show={storageChange} toggleShow={toggleShow} />

// Al convertir en un custom hook
return {
  show: storageChange,
  toggleShow: toggleShow
};

¿Cómo ajustar el componente para que funcione con el custom hook?

Después de modificar el high-order component a un custom hook, debes ajustar cómo el componente se conecta a este nuevo hook:

1. Importa el nuevo custom hook useStorageListener.
2. Utiliza las propiedades devueltas por el custom hook y redefine cómo las usa tu componente.
3. Finalmente, elimina la lógica que solía envolver al componente debido al HOC.

// Antes
const enhancedComponent = withStorageListener(Component);

// Después
const { show, toggleShow } = useStorageListener();

¿Cómo actualizar las importaciones y propiedades en otros componentes?

El proceso de conversión implica revisar y ajustar las importaciones y la manera de trabajar con las propiedades. Asegúrate de revisar cada parte de tu aplicación:

• En el archivo del componente principal (como App), actualiza el componente que usaba el HOC.
• Ve si hay propiedades adicionales que necesitas manejar. Por ejemplo, si antes pasabas propiedades de sincronización, ahora debes modificarlas para que sean recibidas directamente por el custom hook.

// Original al llamar un componente con HOC
<ChainChannelWithStorageListener />

// Llamada al componente con custom hook
<ChainAlert synchronize={yourSynchronizeFunction} />

¿Qué pruebas se deben realizar después de completar la conversión?

El último paso crucial es probar la aplicación para asegurarte que todo funcione correctamente.

• Recarga la aplicación para validar que no hay errores en la consola.
• Simula la interacción que gestionarías con el HOC, por ejemplo, añade un to-do y sincroniza.
• Observa si las notificaciones y actualizaciones funcionan como se espera.

Con estos pasos, debes estar más seguro en tu habilidad para transformar y optimizar tus componentes con custom hooks. No dejes de explorar y aplicarlo en tus propios proyectos. ¡Buena suerte y sigue aprendiendo!