Prefiero mucho más los Hooks, me parece que HOC agregan más pasos y hacen más robusto el código.
Introducción
Patrones de Renderización en React: Props y Componentes de Orden Superior
Principios de diseño en el desarrollo con React
Composición de componentes
Composición de Componentes en React: Flexibilidad y Estado
Patrones de Renderizado en React.js
Optimización de Componentes en React sin React Context
Clase: Composición de Componentes en React sin Context
Patrón Render Props y Render Functions en React
Render props
Render Props y Functions en React: Composición Avanzada
Render Props: Mejora de Componentes en React
Validación de Props en Componentes React Avanzados
React.Children y React.CloneElement: Composición Avanzada
High Order Components
Funciones de Orden Superior en JavaScript y React
High-Order Components: Uso y Práctica en React
Componentes y Eventos en React: Sincronización con localStorage
Sincronización de datos con Local Storage en React
Patrones de Renderizado en React: Ventajas y Desventajas
React Hooks
Comparación: Render Props vs Hooks en React
Conversión de HighOrder Component a Custom Hook en ReactJS
Próximos pasos
Patrones de Renderizado en React.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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!
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".
withStorageListener
a useStorageListener
.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:
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
};
Después de modificar el high-order component a un custom hook, debes ajustar cómo el componente se conecta a este nuevo hook:
useStorageListener
.// Antes
const enhancedComponent = withStorageListener(Component);
// Después
const { show, toggleShow } = useStorageListener();
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:
App
), actualiza el componente que usaba el HOC.// Original al llamar un componente con HOC
<ChainChannelWithStorageListener />
// Llamada al componente con custom hook
<ChainAlert synchronize={yourSynchronizeFunction} />
El último paso crucial es probar la aplicación para asegurarte que todo funcione correctamente.
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
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
.
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?