React: explorando padrões de composição com custom hooks

Introdução a HoC e patterns - Apresentação

Apresentando o instrutor e o curso

Olá, estudante da Alura. Meu nome é Pedro, sou instrutor de front-end na Alura.

Audiodescrição: Pedro é um homem branco, com cabelos escuros e barba escura. Ele veste roupas pretas e está em um ambiente iluminado pelas cores rosa e azul.

Seja bem-vindo a mais um curso de React na nossa plataforma da Alura. Este curso está excelente, pois vamos abordar padrões de composição, ou patterns composition, como preferir chamar.

Explorando o conteúdo do curso

Neste conteúdo, vamos investigar como funcionam certos padrões na escrita de componentes, reaproveitamento de código e funções, principalmente hooks. Neste curso, exploraremos conceitos aprofundados na parte de composição. Para isso, utilizaremos um projeto da Usedev, no qual faremos modificações no funcionamento do radial button e no nosso botão. Além disso, abordaremos a parte de busca e como o nosso fetch funcionará após a aplicação de alguns padrões de composição.

Convidamos você, estudante, a acompanhar desde a primeira aula até o final, subindo degrau a degrau, para chegar a este projeto que já estará pronto, mas no qual faremos várias modificações a nível de composição, reescrita de código e algumas refatorações. Tenho certeza de que será muito divertido. Se você já me conhece, sabe que adoro refatorações e reescrever código. Para mim, essa é a parte mais divertida quando temos um projeto e podemos fazer melhorias nele.

Preparando-se para o aprendizado avançado

Este é um conteúdo mais avançado. Vamos exibir o código, e será necessário ter conhecimento sobre o funcionamento do TypeScript, que utilizaremos bastante. Também escreveremos códigos com hooks, então é importante que você já conheça e saiba o funcionamento dos hooks mais conhecidos, como useState e useEffect. Utilizaremos bastante esses hooks durante nossas reescritas.

Venha animado ou animada, estudante, para seguirmos juntos nesta jornada e aprendermos padrões de composição, HighOrderComponent, RenderProps e CustomHooks. Prepare-se, mantenha-se hidratado ou hidratada, e vamos iniciar esta jornada em mais um curso de React, aprofundando agora em padrões de composição. Vejo você na sequência para começarmos com tudo neste universo.

Introdução a HoC e patterns - Entendendo parttens e composição

Introduzindo padrões e composição em React

Vamos discutir sobre patterns (padrões) e também sobre composição em projetos React. Utilizamos muitas palavras em inglês no meio da programação, mas patterns são simplesmente padrões quando fazemos uma tradução literal. O que realmente importa para nós é o conceito de composição, que é o que vamos explorar.

Os padrões são aqueles que utilizaremos para atuar dentro da composição, principalmente de componentes em nosso projeto em React. É importante que compreendamos esses conceitos e que também entendamos que estaremos basicamente nomeando práticas que talvez já tenhamos visto ou utilizado sem perceber.

Compreendendo o conceito de composição

O conceito de composição envolve compor componentes pequenos em maiores, de forma literal. Isso significa que pegaremos um componente e o aprimoraremos, adicionando funcionalidades que ele talvez não tenha ou que desejamos que ele tenha em determinado contexto. Um exemplo prático disso é dentro de formulários.

Por exemplo, nós temos vários formulários nos quais criamos componentes do zero. Em cada formulário, passamos algumas propriedades, mas toda a lógica é recriada sempre que desenvolvemos um novo formulário. Quando adotamos um aspecto de composição, podemos reunir esses componentes, utilizá-los e adicionar funcionalidades dentro de um contexto de formulário. Eles podem receber, por exemplo, gerenciamento de estado e funções de acessibilidade e clique.

Explorando a separação de responsabilidades

Ao utilizar esse contexto de composição, separamos as responsabilidades entre um componente simples e um componente que recebe informações adicionais, com funcionalidades extras. Sempre que partimos do pressuposto de composição, buscamos aprimorar nossos componentes. Isso facilita o reuso, pois teremos um contexto por trás deles, permitindo reutilizá-lo em vários locais. Além disso, facilita a escrita de testes, pois teremos testes mais focados em um contexto onde esses componentes estão compostos, melhorando a legibilidade quando utilizados em algum contexto.

Preparando para aprofundar nos padrões

Vamos explorar conceitos mais aprofundados sobre esses padrões na sequência. A ideia é primeiro entender a composição antes de discutirmos os padrões e analisarmos cada um deles na prática. Nos encontramos na próxima etapa.

Introdução a HoC e patterns - Introduzindo HoC e suas aplicações

Introduzindo o conceito de High Order Component

Vamos discutir o primeiro padrão de composição que veremos na prática, no código, recriando um exemplo real do zero. O primeiro padrão que abordaremos é o High Order Component (Componente de Ordem Superior). Este padrão é considerado clássico, pois existe desde os primórdios do React, quando os componentes eram tratados apenas com classes, e o gerenciamento de estado não estava disponível em componentes funcionais, algo que hoje é possível graças aos hooks.

O High Order Component surgiu da necessidade de compor componentes que, anteriormente, eram feitos em classe e possuíam um contexto limitado. Às vezes, era necessário ampliar esse contexto ou criar um componente funcional sem gerenciamento de estado, sem a utilização de hooks como useEffect ou useState. Não era possível utilizar o useEffect para gerar um efeito colateral no componente. O High Order Component atende a essa necessidade, permitindo aprimorar componentes funcionais por meio da composição.

Explicando o funcionamento do High Order Component

O High Order Component funciona como uma função que recebe e retorna um componente. Ele é uma função na qual passamos o componente como parâmetro, e o retorno é outro componente, não o mesmo, mas um que utiliza o componente passado como parâmetro, porém com novas funcionalidades e propriedades. Podemos adicionar funções extras, resultando em um componente aprimorado como retorno dentro do nosso High Order Component.

Para ilustrar isso, vamos começar a construir um exemplo de High Order Component. Vamos criar uma função chamada withAuth que recebe um componente como parâmetro. Este é o primeiro passo para criar nosso High Order Component.

function withAuth(Component) {
    // Aqui, adicionaremos funcionalidades extras ao componente
}

Abordando a lógica e os problemas do High Order Component

O High Order Component basicamente reutiliza a lógica da interface do usuário (UI). A forma padrão de escrever um High Order Component é através de um if seguido do nome do contexto, onde passamos o componente como parâmetro dessa função. Por convenção, é assim que se chama o High Order Component. Na documentação do React, não há obrigatoriedade de ser dessa forma, mas a comunidade adotou essa prática.

Toda a lógica da UI estará dentro do nosso High Order Component. Quando passamos nosso componente para dentro dele, ele utiliza essa lógica de UI, além de adicionar funcionalidades extras ao componente por meio do retorno da função.

Discutindo os desafios do High Order Component

Qual é o problema do High Order Component (Componente de Ordem Superior)? Nem tudo são flores, e não podemos ter algo perfeito e maravilhoso, pois, infelizmente, as coisas não são assim. O maior problema de usar o High Order Component, que observamos no dia a dia, é o famoso Prop Drilling. O Prop Drilling ocorre quando passamos as props por muitos níveis: temos um componente pai e passamos a prop do pai para o filho, e do filho para outro filho alinhado. Quando essa prop é passada por muitos níveis, surge um problema de Prop Drilling, o que dificulta a manutenção de um componente. Podemos perder o valor real daquela prop ao passá-la de um componente pai para um componente filho. Esse problema tende a ocorrer com certa facilidade, dependendo do contexto, dentro de um High Order Component.

Outro problema é o Wrapper Hell. O Wrapper Hell ocorre quando temos muitos componentes alinhados, o que dificulta a checagem no console de desenvolvimento para identificar erros. Quando inspecionamos o código e percebemos que está muito alinhado, enfrentamos problemas entre o High Order Component do Prop Drilling e o High Order Component com Wrapper Hell. Quando há um alinhamento muito grande de componentes, podemos acabar caindo no Prop Drilling, que é a passagem das props entre esses componentes alinhados. Se o Prop Drilling está ocorrendo, é porque temos um problema de Wrapper Hell. Não necessariamente temos um Wrapper Hell porque temos um Prop Drilling, mas o Prop Drilling surge justamente por conta de um Wrapper Hell, onde alinhamos vários componentes sem necessidade.

Concluindo com as vantagens do High Order Component

Esses são alguns problemas que devemos considerar ao implementar nosso High Order Component. Vamos focar na parte boa, que é a função que recebe e retorna um componente, permitindo a reutilização da lógica de interface do usuário. Vamos abordar cada um desses passos com calma para construir nosso primeiro High Order Component, melhorando nossa vida, especialmente em formulários. Quando não utilizamos uma biblioteca de formulários em um projeto, é útil criar um High Order Component para lidar com lógica, validações e outros aspectos, facilitando o uso dos componentes dentro de um formulário.

Vamos ver na prática, então? Nos encontramos na sequência.

Sobre o curso React: explorando padrões de composição com custom hooks

O curso React: explorando padrões de composição com custom hooks possui 193 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Introdução a HoC e patterns
• Avançando em patterns e utilização de HoC
• Entendendo os patterns e trade-offs
• Criando Custom Hooks: useSearch
• Criando Custom Hooks: useFetch