DEV Community

loading...
Cover image for Higher-Order Component en React

Higher-Order Component en React

Gonzalo Barrera
Software engineer at Mercado Libre
・1 min read

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);
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)