Pesquisa de site

Obtenha o máximo dos ganchos React com essas práticas recomendadas


React Hooks são um conceito complicado e pode ser difícil saber como usá-los. Siga estas dicas para tirar o melhor proveito do React.

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

Aprenda tudo sobre os fundamentos do React Hooks e descubra algumas práticas recomendadas para usá-los em seus aplicativos React.

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

React Hooks permitem usar o estado e outros recursos do React sem escrever código extra. Hooks 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 comumente usados são useState e useEffect. O gancho useState permite adicionar estado aos seus componentes. Isso é útil para acompanhar a entrada de um usuário ou alterações em um formulário. O gancho useEffect permite executar uma função sempre que um componente é renderizado. Isso é útil para coisas como buscar dados de uma API ou configurar uma assinatura.

Quando você deve usar ganchos React?

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, você usaria o gancho useState. Se você precisar buscar dados de uma API, você usaria o gancho useEffect. Você também pode criar ganchos personalizados para chamadas de API.

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

Melhores práticas com ganchos React

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

1. Apenas chame ganchos de funções React

Você só deve chamar React Hooks a partir 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 a partir de uma função React. 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:

import React, { useState } from 'react';
 
function App() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

E aqui está um exemplo de componente de classe:

import React, { Component } from 'react';
 
class App extends Component {
  state = {
    count: 0
  };
 
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </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.

import React, { useState, useEffect } from 'react';
 
function App() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    console.log('This will run whenever the App component renders!');
  }, []);
 
  useEffect(() => {
    console.log('This will also run whenever the App component renders!');
  }, []);
 
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </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.

import React, { useState, useEffect } from 'react';
 
function App() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    console.log('This will run whenever the App component renders!');
    console.log('This will also run whenever the App component renders!');
  }, []);
 
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </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.

import React, { useState } from 'react';
 
function App() {
  for (let i = 0; i < 10; i++) {
    // Don't do this!
    const [count, setCount] = useState(0);
  }
 
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

No exemplo acima, o componente App renderizará apenas 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.

import React, { useState } from 'react';
 
function App() {
  // This is the correct way to use useState inside a loop
  const [count, setCount] = useState(0);
 
  for (let i = 0; i < 10; i++) {
    // ...
  }
 
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

4. Não abuse dos ganchos

React Hooks são uma ferramenta poderosa, mas você deve evitar usá-los em excesso. Se você estiver usando vários Hook em cada componente, poderá estar abusando deles.

React Hooks são mais úteis quando você precisa compartilhar estado entre vários componentes. Evite usar Hooks desnecessários porque eles podem dificultar a leitura do seu código e podem afetar o desempenho se usados excessivamente.

Adicione mais funcionalidades usando ganchos React 18

Com o lançamento do React 18, novos ganchos estão 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 comumente usados ainda são useState e useEffect.

Artigos relacionados: