O que são Componentes de Ordem Superior(HOCs)?

Quando estamos criando um componente em uma função, muitas vezes precisamos adicionar novas "funções"(não exatamente criar uma function, mas adicionar mais possibilidades naquela function). Para que não seja necessário reescrever o código, e prezando pela estrutura organizada, foi se criado o HOC,ou Higher-Order Component em inglês, mas para nós Componentes de ordem superior).Mas o que são esses Componentes? O que os diferencia dos Componentes clássicos e exemplos de HOC?

O que é um Componente de Ordem Superior -

Um HOC é um componente React que recebe um componente como argumento e retorna outro componente. A ideia é que o HOC forneça funcionalidades adicionais ao componente recebido, sem alterar sua estrutura ou comportamento original. Os HOCs são uma técnica poderosa para criar componentes compostos e reutilizáveis e retornar um novo componente sem mexer ao componente já criado.

Como usar o HOC -

Para criar um HOC em React, primeiro você precisa de uma função que receba um componente como argumento e retorne outro componente. A assinatura básica dessa função seria a seguinte:

function withHOC(WrappedComponent) {
  return class extends React.Component {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

withHOC recebeu como argumento o WrappedComponent e retornou uma classe React Componente no método render o mesmo componente. A estrutura de um Componente de Ordem Superior funciona dessa forma.

Outro exemplo que podemos ver, seria por meio de um contador:

function withContador(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { contador: 0 };
      this.incrementar = this.incrementar.bind(this);
    }

    incrementar() {
      this.setState({ contador: this.state.contador + 1 });
    }

    render() {
      return (
        <WrappedComponent
          contador={this.state.contador}
          incrementar={this.incrementar}
          {...this.props}
        />
      );
    }
  };
}

Acima, o HOC withContador adiciona um estado contador e um método incrementar a um componente. Ele também passa o estado e o método como propriedades para o componente envolvido.

Vimos neste artigo que com os HOCs, é possível encapsular funcionalidades comuns em um componente e aplicá-las a outros componentes sem ter que reescrever o mesmo código várias vezes.