React HOC + React.cloneElement, como e quando você deve usar

Se você é um programador que costuma lidar com situações difíceis no dia a dia, implementando funções complexas, ou até mesmo mais simples, você já deve ter se deparado com uma situação que exige essas funções.

Matheus Cavallini

3 min

Fala pessoal, olha eu de novo por aqui haha. Decidi voltar pra falar um pouco mais sobre outro assunto voltado ao nosso framework queridinho, o React, que inclusive é com ele que você está se comunicando neste exato momento nessa plataforma que vos falo. O assunto de hoje é sobre HOC! - "Mas Matheus, o que é HOC? Pra quê serve?". Calma meu amigo, vem comigo e não te percas!

HOC (High Order Component)

Também conhecido como Componentes de Ordem Superior é uma técnica avançada do React para reutilizar a lógica de um componente. HOCs não são parte da API do React. Eles são um padrão que surgiu da própria natureza de composição do React.

De forma leiga, HOCs são componentes que englobam outros componentes, e esses HOCs geralmente carregam consigo, por exemplo, funções primordiais do sistema (autenticação, provedor de tema, etc). Concretamente, um componente de ordem superior é uma função que recebe um componente e retorna um novo componente.

"Mas onde que entra o React.cloneElement nessa história Matheus?". Vem comigo!

React.cloneElement

Se você é um programador que costuma lidar com situações difíceis no dia a dia, implementando funções complexas, ou até mesmo mais simples, você já deve ter se deparado com esse Hook. Ele nada mais nada menos é o que o próprio nome diz, Clone Element (clonar elemento).

"E como faz pra usar esse tal de cloneElement Matheus?"

Segue o exemplo abaixo:


          
            import React, { cloneElement } from 'react';
          
          
            
          
          
            const MyComponent = ({ children }) => {
          
          
              return cloneElement(children, { onClick: () => console.log('Here we go!') });
          
          
            }
          
          
            
          
          
            export default MyComponent;

Perceba no código acima que o nosso componente está recebendo um children e ele literalmente clona o elemento e altera/adiciona novas props pro componente que foi clonado.

React HOC + React.cloneElement na prática

Finalmente vamos ver um exemplo na prática de como usar essas duas funções ao nosso favor, checa esse exemplo abaixo onde eu mostro um componente HOC de autenticação externa (fake) que tem funções pai que são repassadas para o filho em tempo real:

ExternalAuthenticationHoc.jsx


          
            import React, { cloneElement } from 'react';
          
          
            
          
          
            const ExternalAuthenticationHoc = ({ children }) => {
          
          
            
          
          
              const handleExternalAuth = () => {
          
          
                try {
          
          
                  
          
          
                } catch (error) {
          
          
                  console.log(error) 
          
          
                }
          
          
              };
          
          
            
          
          
              return cloneElement(children, { onClick: handleExternalAuth });
          
          
            }
          
          
            
          
          
            export default ExternalAuthenticationHoc;

MyButton.jsx


          
            import React from 'react';
          
          
            
          
          
            import ExternalAuthenticationHoc from '../components/ExternalAuthenticationHoc';
          
          
            
          
          
            const MyButton = () => {
          
          
              return (
          
          
                <ExternalAuthenticationHoc>
          
          
                  <button type="button">Authenticate</button>
          
          
                </ExternalAuthenticationHoc>
          
          
              )
          
          
            }
          
          
            
          
          
            export default MyButton;

Repare que nós criamos um botão simples somente pra ele poder receber a nova função de onClick que ele herda do nosso HOC e então o botão agora executa a função handleExternalAuth que está dentro do nosso componente HOC. Muito útil, não acham? Essa é somente uma das maneiras de implementar e utilizar essa função do React, existem diversas outras formas de utilizar isso ao nosso favor. Agora é com você, use sua imaginação!

Ficou alguma dúvida? Crítica? Sugestão? Viu algum erro? Então deixa nos comentários clicando nesse botão aqui em baixo:

Fazer um comentário

Se você curtiu meu conteúdo, já deixa uns pings pra mim, e não se esquece de se inscrever no canal pra receber minha newsletter direto no seu e-mail. Por hoje é só, obrigado!

Seguir meu Canal

Learn

Support

More Options