Os componentes de ordem superior (HOCs) são um padrão poderoso e popular no React que permite reutilizar a lógica entre os componentes. HOCs são funções que pegam um componente e retornam um novo componente com funcionalidade adicional. Neste artigo, exploraremos o que são HOCs, por que são úteis e como criá-los com um exemplo.

O que são componentes de ordem superior?

No React, os componentes são os blocos de construção do seu aplicativo. Eles são responsáveis ​​por renderizar os elementos da interface do usuário e gerenciar o estado. Componentes de ordem superior (HOCs) são funções que usam um componente como argumento e retornam um novo componente com funcionalidade adicional. Os HOCs não modificam o componente original, mas criam um novo componente que o envolve.

O conceito de HOCs é baseado na ideia de funções de ordem superior na programação funcional. Na programação funcional, funções de ordem superior são funções que recebem outras funções como argumentos ou retornam funções como resultados. Da mesma forma, os HOCs recebem componentes como argumentos e retornam novos componentes como resultados.

Por que usar componentes de ordem superior?

HOCs são um padrão poderoso no React que pode ajudá-lo a reutilizar a lógica entre os componentes. HOCs são especialmente úteis nas seguintes situações:

1. Reutilização de código:
   se você tiver vários componentes que compartilham a mesma lógica, poderá usar um HOC para extrair essa lógica em uma função separada e reutilizá-la entre os componentes.
2. Abstração:
   HOCs podem abstrair detalhes de implementação e tornar seu código mais modular e fácil de manter.
3. Composição:
   HOCs podem ser usados ​​para compor vários comportamentos em um único componente.

Criar um HOC é fácil. Você simplesmente cria uma função que recebe um componente como argumento e retorna um novo componente com funcionalidade adicional. Vejamos um exemplo:

import React from "react";

const withLoading = (WrappedComponent) => {
  class WithLoading extends React.Component {
    state = {
      isLoading: true
    };

    componentDidMount() {
      setTimeout(() => {
        this.setState({ isLoading: false });
      }, 2000);
    }

    render() {
      const { isLoading } = this.state;

      if (isLoading) {
        return <div>Loading...</div>;
      }

      return <WrappedComponent {...this.props} />;
    }
  }

  return WithLoading;
};

export default withLoading;

Para usar o HOC, simplesmente envolvemos o componente que queremos aprimorar com a withLoadingfunção:

import withLogging from "./LoadingWraper";

const App = () => {
  return (
    <div className="App">
      <div>Hello, World!</div>
    </div>
  );
};
export default withLogging(App);

Conclusão:

HOCs são um padrão poderoso no React que permite reutilizar a lógica entre os componentes. Os HOCs são especialmente úteis quando você tem vários componentes que compartilham a mesma lógica ou quando deseja abstrair detalhes de implementação e tornar seu código mais modular e fácil de manter. Criar um HOC é fácil, basta criar uma função que recebe um componente como argumento e retorna um novo componente com funcionalidade adicional.

CódigoSandBoxLink :-https://codesandbox.io/s/vigorous-rhodes-mgc8z4

Conecte-se comigo na Rede Social

✅Github:https://github.com/surksharathi
✅ Linkedin:https://www.linkedin.com/in/suraksha-singh-88350472/
✅Twitter:https://twitter.com/SurakshaSogaria