<aside> 💡 Data de publicação: 13/06/2024

</aside>

HOCs ou High Order Components é um conceito ao se trabalhar com React, com esse conceito em mente, sabemos que o componentes podem se comportar como funções no JavaScript ou seja membros de primeira classe.

Entendendo High Order Functions

Para trabalharmos com HOCs primeiro precisamos entender como funcionam as HOF, dessa forma podemos aplicar e entender de forma mais simples como essa prática funciona.

const add = (a, b) => a + b;

const calculate = (operation, a, b) => operation(a, b)

const result = calculate(add, 2, 2);

Como podemos ver no snippet acima, nós temos a função de soma e a função de calculadora, a função calculadora recebe a referencia de uma função e efetivamente só executa a operação quando o calculate for executado.

E por que High Order Components?

Como sabemos, no fim das contas os componentes são funções, e com o conhecimento de High Order Functions podemos aplicar conceitos similares com os HOCs

Com essas técnicas, podemos adicionar comportamentos adicionais antes dos nossos componentes renderizar.

Por exemplo, gostariamos de adicionar logs para debugar um componente, podemos adicionar logs e depois ir removendo os mesmos porém se quisermos adicionar logs no inicio e fim do nosso componente podemos realizar isso HOCs.

WithLog HOC

Para começar vamos implementar o nosso HOC de logs, e ele se parece com isso:

import React, { useEffect } from "react";

export const withLog = (WrappedComponent: React.FC) => {
  const WithLogComponent = (props: Record<string, unknown>) => {
    useEffect(() => {
      console.log(`Component ${WrappedComponent} mounted.`);

      return () => {
        console.log(`Component ${WrappedComponent} unmounted.`);
      };
    }, []);
    return <WrappedComponent {...props} />;
  };

  WithLogComponent.displayName = `withLogger(${WrappedComponent})`;

  return WithLogComponent;
};

Essa função vai disparar um useEffect assim que o WrappedComponent for montado, esse effect irá disparar um log no primeiro render e no último, nesse exemplo simples conseguimos alcançar uma forma simples de logar esse componente e claro que podemos extende-la para atender as nossas necessidades.

Exemplo do uso do withLog :

export const MyComponent = withLog(() => {
	return <>...</>
})

Como podemos ver um HOC é utilizado como um decorator no nosso componente funcional. Dessa forma conseguimos adicionar outros comportamentos e acoplar essas funcionalidades para diversos componentes.

Referências