This content originally appeared on DEV Community and was authored by Gonzalo Barrera
Los Higher-Order Component son una técnica usada en React que nos permite hacer un re-uso de los componentes.
Es decir, es una función que recibe un componente y devuelve un nuevo componente.
SuperComponent = HocComponent(WrappedComponent);
Veamos un ejemplo muy típico en proyectos, obtener datos desde un fecth y mostrarlos en pantalla
Si en nuestra aplicación tenemos varios componentes que van a realizar la misma acción, sería muy ineficiente duplicar el código todas las veces, para esto nos pueden servir los HOC
Como podemos ver en el siguiente ejemplo, creamos una función WithDataFetching.js el cual recibe como parámetro, el endpoint que vamos a usar y el componente que queremos mostrar, es acá donde encapsularemos nuestra lógica, y luego retornamos el componente que pasamos como parámetro, pero infectándole el nuevo state, para luego en nuestro App.js pasarle como parámetro el endpoint que necesitamos usar.
Como ven, este tipo de patrón es una técnica que nos permitirá tener un control mucho mas claro de nuestro código y poder optimizar el re-uso de este.
This content originally appeared on DEV Community and was authored by Gonzalo Barrera
Gonzalo Barrera | Sciencx (2021-06-15T22:08:38+00:00) Higher-Order Component en React. Retrieved from https://www.scien.cx/2021/06/15/higher-order-component-en-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.