Obtenha o máximo dos React Hooks com estas melhores práticas

Se você é novo no React, deve estar se perguntando o que são React Hooks e quando usá-los. O React introduziu apenas ganchos em sua versão 16.8, mas eles rapidamente se tornaram um recurso essencial da biblioteca.

Aprenda tudo sobre o básico dos React Hooks e descubra algumas práticas recomendadas para usá-los em seus aplicativos React.

O que são ganchos de reação?

Os React Hooks permitem que você use o estado e outros recursos do React sem escrever código extra. Os ganchos são uma ótima maneira de tornar seu código mais legível e fácil de manter.

existem alguns Ganchos diferentes no React, mas os mais usados ​​são useState e useEffect. O gancho useState permite adicionar estado aos seus componentes. Isso é útil para coisas como acompanhar a entrada de um usuário ou alterações em um formulário. O gancho useEffect permite que você execute uma função sempre que um componente for renderizado. Isso é útil para coisas como buscar dados de uma API ou configurar uma assinatura.

Quando você deve usar React Hooks?

Você deve usar React Hooks sempre que precisar adicionar funcionalidade extra a um componente. Por exemplo, se você precisar acompanhar a entrada de um usuário, use o hook useState. Se você precisar buscar dados de uma API, use o hook useEffect. Você também pode criar ganchos personalizados para chamadas de API.

Se você acabou de começar a usar o React, talvez não precise usar Hooks ainda. Mas conforme você cria aplicativos mais complexos, você descobrirá que os Hooks são uma ótima maneira de adicionar funcionalidade extra aos seus componentes.

Melhores práticas com React Hooks

Agora que você sabe o que são React Hooks e quando usá-los, vamos falar sobre algumas práticas recomendadas.

1. Apenas chamar ganchos de funções de reação

Você só deve chamar React Hooks de funções React. Se você tentar chamar ganchos de reação de um componente de classe, receberá um erro.

Isso ocorre porque você só pode chamar um React Hook de uma função React. As funções React são componentes que você declara com uma palavra-chave de função.

Aqui está um exemplo de um componente de função React:

importar Reagir, { useState } de 'reagir';
funçãoAplicativo() {
const [count, setCount] = useState(0);
retornar (
<div>
<p>{contar}</p>
<botão onClick={() => setCount (contagem + 1)}>
 clique em mim
</button>
</div>
 );
}

E aqui está um exemplo de um componente de classe:

importar Reagir, {Componente} de 'reagir';
aulaAplicativoestendeComponente{
 estado = {
 contagem: 0
 };
render() {
retornar (
<div>
<p>{this.state.count}</p>
<botão onClick={() => this.setState({ contagem: this.state.count + 1 })}>
 clique em mim
</button>
</div>
 );
 }
}

O primeiro exemplo declara o componente App usando a palavra-chave function, enquanto o segundo usa a palavra-chave class.

2. Use apenas um gancho useEffect

Se você estiver usando o gancho useEffect, deverá usar apenas um por componente. Isso ocorre porque useEffect é executado sempre que um componente é renderizado.

Se você tiver vários ganchos useEffect, todos eles serão executados sempre que um componente for renderizado. Isso pode levar a problemas inesperados de comportamento e desempenho. No exemplo abaixo, ambos useEffects serão executados sempre que o componente App for renderizado.

importar Reagir, { useState, useEffect } de 'reagir';
funçãoAplicativo() {
const [count, setCount] = useState(0);
useEffect(() => {
 console.log('Isso será executado sempre que o componente App for renderizado!');
 }, []);
useEffect(() => {
 console.log('Isso também será executado sempre que o componente App for renderizado!');
 }, []);
retornar (
<div>
<p>{contar}</p>
<botão onClick={() => setCount (contagem + 1)}>
 clique em mim
</button>
</div>
 );
}

Em vez de usar vários ganchos useEffect, você pode usar um único gancho useEffect e colocar todo o seu código dentro dele. No exemplo abaixo, apenas um gancho useEffect será executado sempre que o componente App for renderizado.

importar Reagir, { useState, useEffect } de 'reagir';
funçãoAplicativo() {
const [count, setCount] = useState(0);
useEffect(() => {
 console.log('Isso será executado sempre que o componente App for renderizado!');
 console.log('Isso também será executado sempre que o componente App for renderizado!');
 }, []);
retornar (
<div>
<p>{contar}</p>
<botão onClick={() => setCount (contagem + 1)}>
 clique em mim
</button>
</div>
 );
}

Isso significa que você só pode chamar React Hooks do primeiro exemplo. Se você tentar chamar React Hooks do segundo exemplo, receberá um erro.

3. Use ganchos no nível superior

Uma das melhores práticas com React Hooks é usá-los no nível superior. Você deve evitar usar ganchos dentro de loops, condições ou funções aninhadas. Por exemplo, se você usarState dentro de um loop for, cada vez que o loop for executado, o React criará uma nova variável de estado. Isso pode levar a um comportamento inesperado.

importar Reagir, { useState } de 'reagir';
funçãoAplicativo() {
para (deixar eu = 0; eu < 10; i++) {
// Não faça isso!
const [count, setCount] = useState(0);
 }
retornar (
<div>
<p>{contar}</p>
<botão onClick={() => setCount (contagem + 1)}>
 clique em mim
</button>
</div>
 );
}

No exemplo acima, o componente App somente renderizará a contagem e o botão da iteração final do loop. Isso ocorre porque o React atualiza apenas a variável de estado da última iteração.

Em vez de usarState dentro de um loop, você pode declarar uma variável de estado fora do loop. Dessa forma, o React criará apenas uma variável de estado e a atualizará de acordo.

importar Reagir, { useState } de 'reagir';
funçãoAplicativo() {
// Esta é a maneira correta de usar useState dentro de um loop
const [count, setCount] = useState(0);
para (deixar eu = 0; eu < 10; i++) {
// ...
 }
retornar (
<div>
<p>{contar}</p>
<botão onClick={() => setCount (contagem + 1)}>
 clique em mim
</button>
</div>
 );
}

4. Não abuse dos ganchos

Os React Hooks são uma ferramenta poderosa, mas você deve evitar usá-los em excesso. Se você estiver usando vários Hooks em todos os componentes, pode estar usando-os em excesso.

Os React Hooks são mais úteis quando você precisa compartilhar o estado entre vários componentes. Evite usar Hooks desnecessários porque eles podem tornar seu código difícil de ler e podem afetar o desempenho se usados ​​excessivamente.

Adicione mais funcionalidade usando React 18 Hooks

Com o lançamento do React 18, há novos ganchos disponíveis. Cada gancho é específico para um determinado recurso do React. Você pode encontrar uma lista de todos os ganchos disponíveis no site do React. Mas os ganchos mais usados ​​ainda são useState e useEffect.