High Order Components

Los HoC son componentes que buscan abstraer funcionalidad que se repite en varios componentes, y agregarla como add-ons a otros componentes que podemos ir creando.

Más concretamente, un High Order Component es una función que toma como parámetro un componente, y devuelve otro componente.

Esto lo podemos ver con un ejemplo más concreto. Supongamos que tenemos un Form en donde se puse un nombre de usuario y un password, y al hacer click en el botón de Iniciar sesión, queremos que se muestre un componente de Loading, para darle un poco de feedback al usuario de que estamos trabajando.

import React from 'react';
import Loading from '../Loading';
​
class Form extends React.Component {
    constructor(props) {
        super(props);
        this.onClick = this.onClick.bind(this);
        this.state = {
            showLoading: false
        }
    }
    onClick(e) {
        this.setState({
            showLoading: true
        })
    }
​
    render() {
        return (
            <div>
                <input type="text" name="user" />
                <input type="password" name="password" />
                <button onClick={this.onClick}>Login</button>
                { this.state.showLoading && <Loading />}
            </div>
        );
    }
}

export default Form;

Con este código podemos lograr esto, ¿pero qué sucede si tenemos otro componente que al hacer alguna otra acción?, ¿necesitamos hacer el mismo comportamiento? Aquí es donde entra el High Order Component.

Veamos como queda:

import React from 'react';
import LoadingComponent from '../Loading';

const LoadingPlugin = (WrappedComponent) => (
    class Loading extends React.Component {
        constructor(props) {
            super(props);
            this.showLoading = this.showLoading.bind(this);
            this.state = {
                isLoading: false
            };
        }
        showLoading() {
            this.setState({ isLoading: !this.state.isLoading });
        }
    ​
        render() {
            const props = Object.assign({}, this.props, this.state, { showLoading: this.showLoading });
            return [
                <WrappedComponent {...props} />,
                { this.state.isLoading && <LoadingComponent /> }
            ];
        }
    };
)

Por otro lado, actualizamos nuestro componente original:

import React from 'react';
import Loading from '../LoadingPlugin';

class Form extends React.Component {
    onClick(e) {
        this.props.showLoading()
    }
​
    render() {
        return (
            <div>
                <input type="text" name="user" />
                <input type="password" name="password" />
                <button onClick={this.onClick}>Login</button>
            </div>
        );
    }
}

export default Loading(Form);

La linea importante es la ultima, donde estamos invocando a la función del HOC con nuestro componente Form, por lo tanto, va a agregarle el comportamiento de mostrar el Loader.

export default Loading(Form);