No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Conversión de HighOrder Component a Custom Hook en ReactJS

18/19
Recursos

¿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!

Aportes 21

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Prefiero mucho más los Hooks, me parece que HOC agregan más pasos y hacen más robusto el código.

Sin duda los hooks hacen mas legible el codigo y mas pratico de implementar

para mi los HOC hacen ver el código más elegante , pero como pasa en el diseño, primero está la funcionalidad XD. Sin duda los custom Hooks son más fáciles de leer.

Inicie aprendiendo React escribiendo la mayor parte del código con hooks y me parece que para la lógica de compartir los datos es la mejor manera; sin embargo, no dejaría de lado combinar el código con render props, ya que, para maquetación me parece que es más intuitivo.

Prefiero los hooks

El alivio que se siente que el profe Juan al final haya elegido los custom hooks no se puede explicar, estaba empezando a dudar de que React tuviese el proposito de crear nuestro sistema de forma mas facil. Es bueno conocer los HOC sin duda nos pueden ayudar en alguna ocacion especifica pero en sentido general la diferencia para mi es muy grande

Creo que al igual que todos en la sección de comentarios, prefiero los Hooks xd

Prefiero los Hooks más si estas aprendiendo a trabajar con React porque los HOC tienen muchos pasos esto causa confución y muchas veces nos perdemos en e código.

Agregue la opción de no recargar. Ya que era casi obligatorio y no tendría sentido el botón.

useStorageListener.js

    const toggleShow = (even) => {
        if (even) {
            setStorageChange(false)        
        }else{
            sincronize();
            setStorageChange(false)            
        }    
    };

ChangeAlert/index.js

<div className="ChangeAlert-container">
          <p>Hubo cambios</p>
          <p>¿Desea recargar?</p>
          <button
            className="TodoForm-button TodoForm-button--add"
            onClick={() => {
              toggleShow(false);
            }}
          >
            Yes
          </button>
          <button
            className="TodoForm-button TodoForm-button--add"
            onClick={() => {
              toggleShow(true);
            }}
          >
            do not update
          </button>
        </div>

Me interesaba aprender HOC en React pues era un concepto que aparecia de vez en cuando y no sabia muy bien por donde empezar.

Ahora se como se hacen. Y el caso de uso que le veo son con aquellos componentes basados en clases o incluso para añadirle funcionalidades a componentes de las librerias

En general me gusto el curso, suministro varios conceptos u otras formas de crear un proyecto, y no son ni mejor ni peor que otros, cada uno tiene su razon de uso…en lo particular me gusta mas usar React;Context, hace mucho mas facil suministrar informacion de un componente a otro

y en lo particular la forma de arreglar el problema de tener tantas carpetas por componentes, sobre todo en proyectos grandes es combinar ambos mundos

crear carpteas por componentes grandes, por el Header, y dentro de la carpeta Header hacer un composicion interna de sus componentes internos (Nav, Logo, Login, etec)

asi podria quedar un proyecto organizado y facil de actualizar y mejorar

es mi punto de vista actual, quizas mas adelante mientras vaya adquiriendo mas experiencia y adquiriendo mas conocimientos cambie mi forma de pensar

En este caso definitivamente con hook es más simple y legible. Buena clase🙌

React Hooks!!

Cambiando HOCS POR HOOKS

Todo depende de la necesidad dentro del HOC puedes usar custom hooks y asi hacer más funcionalidades generales
Por lo que dicen las fuentes es preferible usar Custom Hooks que los HOCs. HOCs es antiguo y se usaba cuando no existian los custom Hooks
Aguante los Custom Hooks!!!

Cambiando HOCs por React Hooks

.
Lo primero que se hace es cambiar el nombre del archivo, del HOC y su correspondiente export de withStorageListener a useStorageListener, esto con el objetivo de dar a entender que estamos cambiando un HOC por un React Hook.
.
Se elimina los returns de funciones que tenía el hook y también dejamos de pasar como parámetro al WrappedComponent y de hecho ya no lo vamos a utilizar.
.
Finalmente, lo más importante es que ahora retornamos un objeto con la información que queremos pasar a los componentes, en este caso show y toggleShow.
.

import React from 'react';

function useStorageListener(sincronize) {
  const [storageChange, setStorageChange] = React.useState(false);
  
  window.addEventListener('storage', (change) => {
    if (change.key === 'TODOS_V1') {
      console.log('Hubo cambios en TODOS_V1');
      setStorageChange(true);
    }
  });

  const toggleShow = () => {
    sincronize();
    setStorageChange(false);
  };

  return {
    show: storageChange,
    toggleShow,
  };
}

export { useStorageListener };

.
Por otro lado desde el componente ChangeAlert lo que se hizo fue importar y hacer uso del React Hook y por lo tanto ya no es necesario envolver el componente en el HOC y se elimina lo que es el ChangeAlertWithStorageListener y exportamos directamente al componente ChangeAlert.
.

import React from 'react';
import { useStorageListener } from './useStorageListener';
import './ChangeAlert.css';

function ChangeAlert({ sincronize }) {
  const { show, toggleShow } = useStorageListener(sincronize);
  
  if (show) {
    return (
      <div className="ChangeAlert-bg">
        <div className="ChangeAlert-container">
          <p>Parece que cambiaste tus TODOs en otra pestaña o ventana del navegador.</p>
          <p>¿Quieres sincronizar tus TODOs?</p>
          <button
            className="TodoForm-button TodoForm-button--add"
            onClick={toggleShow}
          >
            Yes!
          </button>
        </div>
      </div>
    );
  } else {
    return null;
  }
}

export { ChangeAlert };

.
Desde el componente App cambiamos al componente ChangeAlertWithStorageListener por directamente ChangeAlert.
.
Debido a que este tiene unna propiedad sincronize se tendrá que recibir como parámetro en el componente ChangeAlert y en el React Hook useStorageListener haciendo los cambios pertinentes.
.

function App() {
	...
	return (
    <React.Fragment>
			<ChangeAlert
	      sincronize={sincronizeTodos}
	    />
		</React.Fragment>
	);
}

Team Hooks, los HOC me parecen mas complicado de leer siendo un nuevo miembro del equipo

jmmm creo que dependera mucho del caso el si usamos o no, los custom Hooks o los HOCs, de preferir me parecen mejor los los Custom Hooks