Higher-Order Components en React

Uno de los aspectos en los cuales más nos obsesionamos los desarrolladores al momento de escribir código, es construir código que pueda ser reutilizable a lo largo de nuestro proyecto, lo cúal reduce la complejidad de nuestro proyecto y aumenta nuestra productividad como desarrolladores.

Y en este articulo voy a hablarte sobre Higher-Order Components (HOC), que no es más que una técnica usada en React, para poder reutilizar la lógica de un componente a lo largo de un proyecto y esto se logra concretamente con una función común y corriente que recibe como parámetro un componente y retorna un nuevo componente, cabe resaltar que esta técnica no hace parte del API de React, solo es un patrón utilizado para la reutilización de lógica.

Para poderlo ver más claramente miremos el siguiente ejemplo:

1import React, { Component } from 'react';
2
3class App extends Component {
4 constructor(...props) {
5     super(...props)
6     this.state = { data: [] }
7 }
8 componentDidMount() {
9    fetch('https://jsonplaceholder.typicode.com/posts')
10    .then(response => response.json())
11    .then(data => {
12      this.setState({ data })
13    })
14    .catch(err => console.log(err.message))
15 }
16 
17 render() {
18    const { data } = this.state
19     return (
20           <ul>
21               {data.map(post =>  <li key={post.id}>{post.title}</li> )}
22           </ul>
23     )
24 }
25}
26
27export default App
28

En este componente App lo único que hacemos es realizar una petición usando fetch a una API que nos traera una lista de posts y con esos datos renderizamos una lista donde pondremos en cada item el título de ese post, hasta ahora muy bien, pero ¿cuantas veces no haces componentes asi en tu aplicación?, lo que se haria normalmente es volver a escribir el componentDidMount() en este componente, hacer el fetch actualizando un estado y renderizar estos datos, en estas tareas repetivivas es que nos servirán los HOC.

Para crear un HOC lo que debemos hacer es crear una función como la que muestro a continuación:

1import React,{ Component } from 'react'
2
3export default function withDataFetching(endpoint, WrappedComponent) {
4  return class extends Component {
5    constructor(props) {
6      super(props)
7      this.state = { data: [] }
8    }
9
10    componentDidMount() {
11      fetch(endpoint)
12        .then(response => response.json())
13        .then(data => {
14          this.setState({ data })
15        })
16        .catch(err => console.log(err.message))
17    }
18
19    render() {
20      return <WrappedComponent data={this.state.data} {...this.props} />
21    }
22  }
23}
24

Esta función que yo la llame withDataFetching() me recibe como parámetros, el endpoint al cual yo quiero hacer la petición, y el componente con el cual quiero trabajar, esta función me retorna un componente de React y dentro de este componente es que realizo la lógica que quiero reutilizar a lo largo de mi aplicación, en este caso hago la petición en el componentDidMount() al endpoint que recibo como parámetro actualizo el estado data y en el método render de este componente lo único que hago es retornar el componente que recibi como párametro inyectandole la nueva data y pasandole las propiedades.

Ya con esto hecho, en el componente App lo único que debemos hacer es ejecutar nuestra función withDataFetching() en el momento de exportar nuestro componente

1export default withDataFetching('https://jsonplaceholder.typicode.com/posts', App)
2

Aqui solo pasamos el endpoint para nuestra consulta y nuestro componente App, esto lo que hara es que como párametro recibiremos la data consultada en el endpoint, y gracias a esto no necesitariamos hacer la petición en nuestro componente, con lo cual nuestro componente App quedaria algo asi:

1import React,{ Component } from 'react';
2import withDataFetching from './withDataFetching'
3
4class App extends Component {
5  render() {
6    return (
7      <ul>
8        {this.props.data.map(post =>  <li key={post.id}>{post.title}</li> )}
9      </ul>
10    )
11  }
12}
13
14export default withDataFetching('https://jsonplaceholder.typicode.com/posts', App)
15

Gracias a withDataFetching() podemos eliminar el estado local y el componentDidMount() ya que withDataFetching() se estara encargando de hacer la petición y mandarnos como párametro la data resultante, esto es muy beneficioso ya que nos permite reutilizar esta clase de lógica en cualquier componente de nuestra aplicación e incluso si nuestro componente App no requiere de más logica adicional podemos convertirlo en un componente presentacional, como lo puedes ver a continuación:

1import React,{ Component } from 'react';
2import withDataFetching from './withDataFetching'
3
4const App = ({ data }) => (
5  <ul>
6    {data.map(post =>  <li key={post.id}>{post.title}</li> )}
7  </ul>
8)
9
10export default withDataFetching('https://jsonplaceholder.typicode.com/posts', App)
11

Si quieres ver el codigo completo de este post te lo dejo en el siguiente link HOC

Hasta la próxima.