O que é um HOC em React

Introdução

Seguindo o assunto de reutilização de código do artigo anterior, vamos falar sobre os HOCs (Higher-Order Components), que são funções que recebem um componente como argumento e retornam um novo componente com alguma funcionalidade adicionada a ele. Eles permitem a reutilização de lógica e o aprimoramento de componentes em uma aplicação React. Neste artigo, vamos criar um exemplo básico de um HOC para componentes funcionais em React.

Criando um HOC para adicionar um indicador de carregamento

Vamos criar um HOC que adiciona um estado isLoading (carregando) ao componente funcional. Esse estado isLoading será usado para mostrar uma animação de carregamento enquanto o componente estiver sendo renderizado.

import React, { useState } from 'react';

const withLoading = (Component) => {
  return function WithLoadingComponent(props) {
    const [isLoading, setIsLoading] = useState(false);
    return (
      <>
        {isLoading && <div>Carregando...</div>}
        <Component setIsLoading={setIsLoading} {...props} />
      </>
    );
  };
};

export default withLoading;

Nessa função HOC, criamos um novo componente com a função WithLoadingComponent que recebe as propriedades do componente original e adiciona uma nova propriedade setIsLoading, que será usada para atualizar o estado isLoading. O componente WithLoadingComponent renderiza o componente original com as propriedades passadas para ele, juntamente com a lógica adicionada.

Usando o HOC em um componente funcional existente

Agora, vamos usar esse HOC em um componente funcional existente. Vamos criar um componente funcional chamado MyComponent que leva algum tempo para ser carregado e, portanto, precisa de um indicador de carregamento.

import React from 'react';
import withLoading from './withLoading';

const MyComponent = ({ setIsLoading }) => {
  useEffect(() => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 3000);
  }, [setIsLoading]);

  return <div>Conteúdo do meu componente</div>;
};

export default withLoading(MyComponent);

Neste exemplo, o componente MyComponent usa o HOC withLoading e passa a função setIsLoading para atualizar o estado isLoading no HOC. O componente MyComponent também usa o hook useEffect para simular um tempo de carregamento de três segundos antes de definir isLoading para false.

Com o uso do HOC withLoading, o componente MyComponent agora tem um indicador de carregamento que é exibido enquanto a lógica é executada e o conteúdo do componente é renderizado.

Conclusão

Neste artigo, aprendemos como criar um HOC para componentes funcionais em React. Os HOCs são uma ferramenta poderosa para reutilizar lógica e aprimorar a funcionalidade do componente em uma aplicação React. Espero que você possa usar essas informações para melhorar seus próprios projetos React!