Qué son los componentes de orden superior (HOC) en React

Vista previa del material en texto

¿Qué son los componentes de orden superior (HOC) en React? 
 
Los Componentes de Orden Superior (Higher-Order Components o HOC, en inglés) en React son una 
técnica avanzada de reutilización de componentes que permite encapsular la lógica común y mejorar 
la composición de componentes. Los HOC son funciones que toman un componente como entrada y 
devuelven un nuevo componente modificado. 
 
La idea detrás de los HOC es crear una función que tome un componente y agregue funcionalidad 
adicional a ese componente, como lógica de estado, propiedades adicionales o manejo de eventos. 
De esta manera, puedes envolver componentes existentes con HOC para mejorar su funcionalidad 
sin tener que modificar directamente el código del componente original. 
 
Un HOC puede realizar tareas como: 
- Agregar props adicionales al componente. 
- Manipular y pasar datos al componente. 
- Controlar el estado y la lógica de la interfaz de usuario del componente. 
- Manejar eventos específicos y acciones. 
 
Un ejemplo simple de HOC sería un HOC que agrega un contador a un componente: 
 
```jsx 
// El HOC para agregar un contador 
const withCounter = (WrappedComponent) => { 
 class WithCounter extends React.Component { 
 constructor(props) { 
 super(props); 
 this.state = { 
 count: 0, 
 }; 
 } 
 
 incrementCount = () => { 
 this.setState((prevState) => ({ count: prevState.count + 1 })); 
 }; 
 
 render() { 
 return ( 
 <WrappedComponent 
 count={this.state.count} 
 incrementCount={this.incrementCount} 
 {...this.props} 
 /> 
 ); 
 } 
 } 
 
 return WithCounter; 
}; 
 
// El componente original 
const MyComponent = (props) => { 
 return ( 
 <div> 
 <h1>Contador: {props.count}</h1> 
 <button onClick={props.incrementCount}>Incrementar</button> 
 </div> 
 ); 
}; 
 
// Envolver el componente original con el HOC 
const MyComponentWithCounter = withCounter(MyComponent); 
 
export default MyComponentWithCounter; 
``` 
 
En el ejemplo anterior, hemos definido un HOC llamado `withCounter` que toma un componente 
llamado `WrappedComponent` como entrada. El HOC agrega un contador y la función 
`incrementCount` al componente original, y devuelve un nuevo componente llamado `WithCounter`. 
 
Luego, hemos envuelto el componente `MyComponent` original con el HOC `withCounter`, lo que 
nos da un nuevo componente llamado `MyComponentWithCounter`. Ahora, el componente 
`MyComponentWithCounter` tiene la funcionalidad de contador agregada por el HOC. 
 
Los HOC son una poderosa técnica de composición en React que permite crear componentes más 
reutilizables, escalables y con lógica compartida. Sin embargo, es importante tener en cuenta que 
con la introducción de los Hooks en React, muchos casos de uso de HOC ahora pueden ser 
reemplazados o simplificados con Hooks, especialmente con el Hook `useMemo` o `useReducer`.