O poder dos ganchos no React: aplicativos dinâmicos simplificados

Uma adição recente à biblioteca React, Hooks, alterou fundamentalmente a forma como os desenvolvedores criam componentes React. Sem a necessidade de criar um componente de classe, os ganchos permitem que componentes funcionais acessem outros recursos do React e tenham um estado.

Antes dos Hooks, os componentes de classe eram a única opção para adicionar um estado a um componente React. No entanto, à medida que a complexidade do componente React aumentou, os componentes da classe tornaram-se demorados e difíceis de compreender. Os desenvolvedores podem gerenciar o estado e outras lógicas em um componente funcional usando ganchos, o que torna seu código mais curto e simples de compreender.

Os ganchos rapidamente se tornaram parte integrante da comunidade React, oferecendo maneiras intuitivas e eficientes de gerenciar a lógica dos componentes e tornando o código mais fácil de entender e executar. Ele revolucionou a forma como os componentes do React são escritos.

Este artigo abordará os conceitos básicos e avançados de ganchos para que você possa entender como usá-los para criar aplicativos robustos, escaláveis ​​e flexíveis. Ao final deste artigo, você terá um bom entendimento dos ganchos e será capaz de usá-los em seus próprios projetos.

O que são ganchos?

Os componentes funcionais agora podem lidar com o estado e executar efeitos colaterais que antes estavam disponíveis apenas em componentes de classe, graças aos React Hooks. Os desenvolvedores podem construir um código mais limpo e reutilizável com ganchos, o que torna a base de código mais simples de compreender e manter.

Os ganchos no React permitem que você traga estado e outras funcionalidades de maneira eficiente aos seus componentes funcionais, fornecendo-lhes a funcionalidade dos componentes da classe.

Existem dois tipos de ganchos; ganchos de estado e ganchos de efeito. A tabela abaixo apresenta uma breve comparação entre os dois.

Com a ajuda de ganchos, o aplicativo e o código tornam-se eficientes, reutilizáveis ​​e mais fáceis de entender. Além disso, os componentes podem compartilhar ganchos, simplificando o compartilhamento de seu estado e outras funcionalidades em todos os aplicativos.

Por que você deve usar ganchos no React?

React Hooks transformam seus componentes funcionais para oferecer flexibilidade incomparável, gerenciamento de estado simplificado e código eficiente. Vamos dar uma olhada em como esses ganchos podem ajudá-lo no processo de desenvolvimento de aplicativos.

1. Os ganchos ajudam a tornar seu código mais fácil de entender e aumentar a legibilidade, incorporando efetivamente o estado e outras funcionalidades nos componentes funcionais. Como resultado, permite criar código facilmente legível e modificado.
2. Os ganchos melhoram a capacidade de reutilização do código, compartilhando-o entre os componentes, tornando mais simples o compartilhamento eficiente de seu estado e funcionalidade adicional entre seus aplicativos. Ajuda a reduzir o código e torná-lo reutilizável.
3. Os ganchos melhoram o desempenho do aplicativo otimizando-o com a ajuda dos ganchos useMemo que auxiliam na memorização dos cálculos. Ajuda a melhorar o desempenho do aplicativo.
4. Os ganchos melhoram a experiência do desenvolvedor, simplificando as funcionalidades dos componentes, minimizando o número de componentes da classe. Aumenta a produtividade e a eficiência e dá resultados mais satisfatórios.

Veremos agora um exemplo para familiarizá-lo com o uso de ganchos. Este exemplo demonstra o gancho useCallback.

import React, { useState, useCallback } from 'react';

function UseCallbackExample  {
 const (increment, setIncrement) = useState(0);
 const val = useCallback(  => {
   setIncrement(counterIncrement => counterIncrement + 1);
 }, (setIncrement));
 return (
   <div>
     <p>You have clicked {increment} times.</p>
     <button onClick={val}>
       Click Here!
     </button>
   </div>
 );
}

export default UseCallbackExample;

A função memorizada criada no exemplo acima usa o gancho useCallback. Para evitar o recálculo de um valor, pense na memoização como armazená-lo em cache. Isso nos permite separar operações que consomem muitos recursos para que elas não sejam iniciadas automaticamente em todas as renderizações. A função é modificada quando dependências específicas mudam, melhorando o desempenho e evitando a nova renderização desnecessária de componentes.

No geral, os ganchos simplificam o código, melhorando o desempenho, a experiência do desenvolvedor e a capacidade de reutilização. Além disso, os ganchos modificaram as abordagens do desenvolvedor para escrever e executar o código, fornecendo flexibilidade e abordagens mais organizadas, tornando-o uma ferramenta essencial.

Como você pode usar ganchos no React?

Vários tipos de ganchos no React permitem que os desenvolvedores criem seus aplicativos de maneira fácil e eficiente. Esta seção se aprofundará em seis ganchos comumente usados. Os ganchos de estado e de efeito são os mais comumente usados ​​no React.

Os ganchos de estado permitem a adição e atualização do estado aos componentes funcionais. O desenvolvedor pode usar ganchos State importando os ganchos useState da biblioteca React. Depois de importar o gancho useState, iremos chamá-lo dentro de nosso componente, passando um valor de estado inicial, fornecendo um array como saída. Uma matriz conterá dois componentes: o valor atual do estado e a função setter para modificar o estado.

Os ganchos de efeito permitem que os desenvolvedores executem os efeitos colaterais dentro dos componentes funcionais, obtendo os dados com a ajuda de uma API ou modificando o título do documento. O desenvolvedor pode usar ganchos de efeito importando os ganchos useEffect da biblioteca React. Depois de importar o gancho useEffect, iremos chamá-lo dentro de nosso componente e fornecer uma função que define o efeito. Toda renderização subsequente do componente chamará esta função. os desenvolvedores podem utilizar quantos ganchos quiserem no mesmo componente, o que lhes permite trazer vários estados e executar vários efeitos colaterais.

Para usar Ganchos de forma eficiente, é crucial seguir algumas diretrizes:

• Não podemos utilizar ganchos em componentes de classe, pois eles são feitos principalmente para componentes funcionais.
• Ganchos não devem ser chamados dentro de loops, condições ou funções aninhadas, pois isso pode resultar em comportamento inesperado. Quando você evita isso, os ganchos são chamados na mesma ordem sempre que um componente é renderizado. Em vez disso, os ganchos são melhor utilizados no nível superior de um componente e os condicionais podem usar os valores retornados.

Essas diretrizes ajudarão você a usar ganchos de maneira eficaz e a manter a funcionalidade e a eficiência de seu aplicativo. Além disso, é crucial ter em mente que os ganchos funcionarão apenas nos componentes da função React; como resultado, quando você precisar incluir efeitos colaterais ou de estado em um componente de classe, use componentes baseados em classe ou considere convertê-los em componentes de função.

Hooks são uma ferramenta essencial que permite aos desenvolvedores criar um aplicativo eficaz e dinâmico, tornando-o eficiente, reutilizável e fácil de entender. Esta seção explorará os tipos de ganchos e fornecerá exemplos de sua implementação. A seguir estão os tipos de ganchos no React.

1. useEstado

O gancho useState permite que os desenvolvedores adicionem e modifiquem os componentes funcionais gerenciando o estado dentro dos componentes. O gancho useState retorna um estado atual e a função que modifica o estado.

O estado inclui objetos e matrizes como um dos tipos de estado. Os ganchos useState otimizam o gerenciamento de estado dentro do componente funcional e melhoram o desempenho do aplicativo, fornecendo abordagens eficazes para lidar com o estado. Vejamos um exemplo para entender melhor o gancho useState.

Comece importando o gancho useState da biblioteca React, e então o chamaremos dentro do componente passando um valor inicial de 0. Agora use uma variável increment que é inicializada como 0. O valor do estado atual seria increment, e o colono a função é setIncrement.

Ao clicar no botão Click Me, o estado é modificado com a função do colonizador setIncrement, e o incremento do valor do estado atual é usado para exibir quantas vezes você executou os cliques. Depois que o botão for clicado, o valor do estado será salvo e o componente será renderizado novamente para a função do colonizador setIncrement para atualizá-lo com um novo valor.

import React, { useState } from 'react';

function UseStateExample  {
  // Declare a useState variable "increment"
  // After declaring the variable, initialize it to 0
  const (increment, setIncrement) = useState(0);
  
  return (
    <div>
      <h4>You have performed {increment} clicks.</h4>
      <button onClick={  => setIncrement(increment + 1)}>
        Click Me
      </button>
    </div>
  );
}

export default UseStateExample;

Vimos como um valor aumenta cada vez que clicamos em um botão usando ganchos useState. Os ganchos useState são simples e essenciais para lidar com o estado nos componentes de função do React. Ajuda a modificar e adicionar estado, fornecendo eficiência ao código e tornando-o mais fácil de entender.

2. useEfeito

O gancho useEffect permite que os desenvolvedores executem efeitos colaterais nos componentes funcionais, buscando os dados com a ajuda de uma API ou modificando o título do documento.

Vamos explorar um exemplo para uma melhor compreensão do gancho useEffect.

Comece importando o gancho useEffect da biblioteca React. Depois de importar o gancho useEffect, iremos chamá-lo dentro do componente passando uma função que define o useEffect.

No nosso caso, estamos modificando o título do documento para retornar a exibição de quantas vezes realizamos os cliques. O gancho useEffect é executado após a renderização de cada componente, consistindo na nova renderização inicial e subsequente.

Assim, o incremento foi atualizado renderizando novamente o componente que executou aquele useEffect que modificou o título do documento.

import React, { useState, useEffect } from 'react';

function UseEffectExample  {
  // Declare a usestate variable "increment"
  // AFter declaring the variable, initialize it to 0
  const (increment, setIncrement) = useState(0);

  // Declare a useEffect hook which executes after each render
  useEffect(  => {
    document.title = `You have performed ${increment} clicks`;
  });

  return (
    <div>
      <h4>You have performed {increment} clicks.</h4>
      <button onClick={  => setIncrement(increment + 1)}>
        Click Me
      </button>
    </div>
  );
}

export default UseEffectExample;

O useEffect é uma ferramenta essencial para gerenciar os efeitos colaterais dentro do componente de função do React. O useEffect ajuda a melhorar o desempenho, a manutenção e a compreensão do código.

3. useContexto

Outro gancho comumente usado é o gancho useContext, que nos permite acessar os dados de contexto dentro dos componentes funcionais. No React, useContext é uma técnica para enviar os dados com a ajuda de uma árvore de componentes sem enviar manualmente os adereços em cada estágio.

Vamos ver um exemplo para uma melhor compreensão do gancho useContext.

Use useContext para inicializar o contexto e chamar o método React.createContext, que usa o valor inicial como parâmetro de entrada. Estamos usando um fundo amarelo e uma cor branca como valor inicial.

import React, { useContext } from 'react';

// Create a useContext hook
const UseContextTheme = React.createContext({
  background: 'yellow',
  color: 'white'
});

O componente UseContextThemeButton usa o contexto chamando o gancho useContext com o contexto como parâmetro. Ele retornará o valor do contexto atual, o fundo azul e a propriedade da cor branca.

// This components utilized the context
function UseContextThemeButton  {
  const themeButton = useContext(UseContextTheme);

  return (
    <button style={{ background: themeButton.background, color: themeButton.color }}>
      I am a Use Context Theme Button
    </button>
  );
}

Agora usamos o componente UseContextThemeProvider para agrupar seus filhos em UseContextTheme.Provider, fornecendo ao valor prop um valor de contexto.

// This components provides the context
function UseContextThemeProvider({ children }) {
  return (
    <UseContextTheme.Provider value={{ background: 'blue', color: 'white' }}>
      {children}
    </UseContextTheme.Provider>
  );
}

Agora combinamos as funções acima em uma, para que possamos chamá-la como um componente em si.

// Function that calls all of the above functions
function UseContextExample  {
  return (
    <UseContextThemeProvider>
      <UseContextTheme_Button />
    </UseContextThemeProvider>
  );
}

export default UseContextExample;

Um gancho useContext é uma ferramenta essencial para acessar os dados de contexto no componente funcional do React. Além disso, ajuda a otimizar o desempenho do código, evitando a nova renderização sempre que o valor do contexto muda.

4. useRedutor

O gancho useReducer é uma ferramenta essencial que nos permite lidar com a complexa lógica de estado dentro do componente funcional. É análogo ao gancho useState. No entanto, oferece mais flexibilidade para determinar como o estado foi atualizado.

O código a seguir demonstra um exemplo do gancho useReducer.

Comece criando uma função chamada incrementDecrement que recebe dois parâmetros: estado e ação. A modificação do estado é descrita pela ação, que é um objeto. No nosso caso, somar e subtrair são duas ações que aumentam e diminuem o valor.

import React, { useReducer } from 'react';

// Declare the incrementDecrement function
function incrementDecrement(state, action) {
  switch (action.type) {
    case 'subtract':
      return { value: state.value - 1 };
    case 'add':
      return { value: state.value + 1 };
    default:
      throw new Error ;
  }
}

A função incrementDecrementCounter usa o gancho useReducer, que usa a função incrementDecrement e o estado inicial como argumento. Primeiro, o estado inicial é declarado como um valor inicializado em 0. Em seguida, o gancho useReducer retorna a função de despacho e o estado atual como saída.

A função expedição utiliza a ação expedição, que resulta na modificação do estado. Em seguida, renderize os botões de adição e subtração junto com o valor.

function incrementDecrementCounter  {
  const (state, dispatch) = useReducer(incrementDecrement, { value: 0 });
  return (
    <>
    <h3>
      Value: {state.value}
    </h3>
      <p></p>
      <button onClick={  => dispatch({ type: 'add' })}>+</button>
      <button onClick={  => dispatch({ type: 'subtract' })}>-</button>
    </>
  );
}

export default incrementDecrementCounter;

Clicar no botão adicionar aumentará o valor em um, enquanto clicar no botão subtrair diminuirá o valor em um.

No React, o gancho useReducer é útil porque evita novas renderizações desnecessárias e ajuda a manter o código.

5. useMemo

O gancho useMemo nos permite otimizar memorizando os valores e evitando a nova renderização desnecessária de componentes. É necessário um array de dependência e uma função como parâmetro. A função retorna o valor que deve ser memorizado, enquanto um valor memorizado lista as dependências na matriz de dependências. Além disso, o valor memorizado é recalculado sempre que o valor é alterado.

O código a seguir demonstra um exemplo do gancho useMemo.

O componente UseMemoExample usa o nome, o nome do meio e o sobrenome como um suporte que usa o gancho useMemo para reter o valor.

O componente UseMemoApp trata o estado do primeiro, do meio e do último campo. Esses campos armazenam o nome de uma pessoa depois que o texto é inserido. O estado será atualizado toda vez que o valor for modificado no texto de entrada com a ajuda do evento onChange.

import React, { useState, useMemo } from 'react';

const UseMemoExample = ({ first, middle, last }) => {
  const Name = useMemo(  => {
    return `${first} ${middle} ${last}`;
  }, (first, middle, last));

  return <h1>Welcome, {Name}!</h1>;
};

export const UseMemoApp =   => {
  const (first, setFirst) = useState('John');
  const (middle, setMiddle) = useState('Adam');
  const (last, setLast) = useState('Doe');
  return (
    <div>
      <input
        type="text"
        value={first}
        onChange={e => setFirst(e.target.value)}
      />
      <input
        type="text"
        value={middle}
        onChange={e => setMiddle(e.target.value)}
      />
      <input
        type="text"
        value={last}
        onChange={e => setLast(e.target.value)}
      />
      <UseMemoExample first={first} middle={middle} last={last} />
    </div>
  );
};

O componente exibe uma constante Name como saída que é a concatenação do nome, do meio e do sobrenome da pessoa.

No React, o gancho useMemo aumenta a eficiência e o desempenho do aplicativo.

6. Ganchos personalizados

Ganchos personalizados permitem que os desenvolvedores encapsulem e compartilhem as funcionalidades entre os diferentes componentes. A seguir está um exemplo para demonstrar o gancho personalizado que descreve a implementação da dimensão da janela.

Criamos um gancho personalizado chamado CustomHooksToCheckWindowDimensions que retorna W e H da janela como uma saída onde W é a largura e H é a altura da janela. Estamos usando os ganchos useState e useEffect para determinar a dimensão da janela e modificar o valor do estado sempre que a janela for redimensionada.

O CustomHooksToCheckWindowDimensions usa o gancho useState para iniciar o valor do estado atingindo a largura e a altura internas da janela usando as propriedades window.innerWidth e window.innerHeight.

O gancho useEffect auxilia no monitoramento da modificação da dimensão da janela. Além disso, quando a janela é redimensionada, a função de redimensionamento passada para addEventListener é invocada, que invoca setDim para refletir o novo tamanho da janela.

import React, { useState, useEffect } from 'react';

function CustomHooksToCheckWindowDimensions  {
  const (dim, setDim) = useState({
    W: window.innerWidth,
    H: window.innerHeight
  });

  useEffect(  => {
    function resizing  {
      setDim({
        W: window.innerWidth,
        H: window.innerHeight
      });
    }

    window.addEventListener('resize', resizing);
    return   => {
      window.removeEventListener('resize', resizing);
    };
  },  );

  return dim;
}

Por último, o componente CustomHookApp chama CustomHooksToCheckWindowDimensions, que retorna a largura e a altura da janela. A dimensão da janela será exibida como saída.

function CustomHookApp  {
  const { W, H } = CustomHooksToCheckWindowDimensions ;

  return (
    <div>
      <h1>Dimension of the Window is:</h1>
      <p>Width: {W}</p>
      <p>Height: {H}</p>
    </div>
  );
}

export default CustomHookApp;

Ganchos personalizados permitem lidar com vários casos de uso, como manipulação de formulários e temporizadores, que não eram possíveis antes.

Vantagens de usar ganchos React

Esta seção explorará as vantagens do uso de ganchos. A seguir estão os benefícios de usar ganchos em vez de componentes de classe:

Reutilização e Concisão do Código

O uso de ganchos personalizados permite o encapsulamento da lógica e a reutilização da lógica entre vários componentes, melhorando a modularidade, a compreensibilidade, o desempenho e a sustentabilidade do código. Além disso, o emprego de ganchos ajuda a minimizar o código clichê na criação de componentes, o que aumenta a concisão e torna o código mais fácil de entender.

Melhor performance

No React, os ganchos permitem que os desenvolvedores otimizem os componentes usando vários métodos e abordagens, incluindo useMemo e useCallback, o que ajuda a melhorar o desempenho do aplicativo.

Melhor legibilidade e produtividade dos desenvolvedores

No React, os ganchos são uma ferramenta essencial que aumenta a compreensibilidade do fluxo lógico e dos dados presentes nos componentes, o que leva a uma melhor legibilidade e facilidade de depuração. Além disso, agiliza o processo de desenvolvimento, tornando o código e a manutenção dos componentes mais fáceis de entender.

Melhor acessibilidade e apoio comunitário

Encapsular a lógica dos recursos de acessibilidade em ganchos personalizados e reutilizá-los em seu aplicativo fica mais simples com a ajuda de ganchos. Além de ser um componente totalmente suportado do ecossistema React, a biblioteca de ganchos possui uma comunidade considerável e ativa de desenvolvedores que colaboram ativamente e compartilham conhecimento e ferramentas.

Melhor gestão do estado

Os ganchos simplificam o gerenciamento do estado dos componentes, encapsulando a lógica para atualizar e modificar o estado em ganchos discretos e reutilizáveis.

Melhore o compartilhamento de código e testes simplificados

A lógica nos ganchos pode ser testada independentemente dos componentes que os utilizam, o que facilita testes unitários eficientes. Além disso, ganchos personalizados podem compartilhar o código entre os membros da equipe e facilitar a reutilização do código, trabalhando em um projeto complicado dentro de um grupo grande.

Os ganchos no React oferecem várias vantagens que melhoram a qualidade, o desempenho e a capacidade de manutenção do código e simplificam o processo de desenvolvimento. Com a ajuda de ganchos, um indivíduo pode criar um aplicativo dinâmico, otimizado e escalonável no React.

Pensamentos finais

React Hooks fornecem uma abordagem robusta e flexível para a criação de componentes no React. Eles permitem um código mais simples, compreensível e fácil de manter. Ao utilizar Hooks, os desenvolvedores podem criar aplicativos complicados com menos complexidade geral e menos linhas de código-fonte. Eles também oferecem um meio simples de gerenciar estados entre vários componentes sem a necessidade de componentes baseados em classes ou bibliotecas de estados globais como Redux. Você deve saber como usar React Hooks para aproveitar todo o seu potencial ao desenvolver aplicativos.

Se você gostou disso, não deixe de conferir nossos outros artigos sobre React.

• Principais perguntas e respostas da entrevista React que você precisa saber
• Teste de unidade em React: guia detalhado
• Em quais projetos sua empresa pode usar o React?
• O que você precisa saber sobre o React antes de usá-lo em seu negócio
• 6 razões pelas quais o React é tão popular