React Hooks

React Hooks são funções especiais introduzidas na versão 16.8 do React, que permitem o uso de recursos de estado e ciclo de vida em componentes funcionais. Antes dos Hooks, esses recursos eram disponíveis apenas em componentes de classe. Os Hooks proporcionam uma maneira mais simples e concisa de reutilizar a lógica estateful entre componentes, sem a necessidade de modificar a hierarquia de componentes.

O que são Hooks?

Hooks são funções que "se conectam" aos recursos de estado e ciclo de vida do React a partir de componentes funcionais. Eles permitem que você use estado, execute efeitos colaterais e acesse outros recursos do React sem escrever uma classe. Os Hooks são uma adição ao React e não substituem completamente os componentes de classe, mas fornecem uma alternativa mais flexível e modular para gerenciar o estado e os efeitos colaterais.

Regras dos Hooks

Ao usar Hooks, é importante seguir duas regras principais:

1. Apenas chame Hooks no nível superior: Não chame Hooks dentro de loops, condicionais ou funções aninhadas. Os Hooks devem ser chamados no nível superior do componente funcional para garantir que sejam chamados na mesma ordem a cada renderização.
2. Apenas chame Hooks de componentes funcionais: Não chame Hooks de funções JavaScript regulares. Os Hooks devem ser chamados apenas de componentes funcionais do React ou de custom Hooks.

Hooks Básicos

O React fornece alguns Hooks básicos que cobrem a maioria dos casos de uso comuns. Aqui estão os principais Hooks básicos:

useState

O Hook useState é um dos Hooks básicos fornecidos pelo React, permitindo adicionar estado a um componente funcional sem a necessidade de convertê-lo em um componente de classe. O useState é usado quando você precisa armazenar e atualizar valores dentro de um componente. A sintaxe básica do useState é a seguinte:

const [state, setState] = useState(initialValue);

Aqui, state é o nome da variável de estado que você deseja declarar e pode ter qualquer nome você escolher, setState é uma função que permite atualizar o valor do estado, aceitando um novo valor e enfileirando uma nova renderização do componente, e initialValue é o valor inicial do estado, podendo ser de qualquer tipo, como um número, uma string, um objeto ou um array. Vejamos um exemplo simples de como usar o useState para criar um contador:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

export default Counter;

Neste exemplo, importamos o Hook useState do pacote 'react', declaramos uma variável de estado chamada count e uma função setCount para atualizá-la, usando a desestruturação de array, com o valor inicial do count definido como 0. No JSX retornado, exibimos o valor atual do count usando {count} e, quando o botão é clicado, a função setCount é chamada com um novo valor, incrementando o count em 1, fazendo com que o React atualize automaticamente a interface do usuário para refletir o novo valor do estado.

Ao atualizar o estado usando a função setState, você pode passar um novo valor diretamente, como setCount(count + 1), ou usar uma função de atualização que recebe o valor anterior do estado como argumento e retorna o novo valor, como setCount(prevCount => prevCount + 1), sendo essa última abordagem útil quando o novo valor do estado depende do valor anterior.

Além disso, você pode usar o useState várias vezes em um único componente para declarar múltiplas variáveis de estado independentes, como:

const [count, setCount] = useState(0);
const [name, setName] = useState('');
const [isLoggedIn, setIsLoggedIn] = useState(false);

useEffect

O Hook useEffect é outro Hook fundamental fornecido pelo React, permitindo que você execute efeitos colaterais em componentes funcionais. Efeitos colaterais podem incluir coisas como buscar dados de uma API, subscrever eventos, modificar o DOM ou qualquer outra operação que possa afetar o estado do componente ou interagir com o mundo externo. O useEffect combina os métodos de ciclo de vida componentDidMount, componentDidUpdate e componentWillUnmount encontrados em componentes de classe em uma única API.

A sintaxe básica do useEffect é a seguinte:

useEffect(() => {
  // Código do efeito colateral
  return () => {
    // Código de limpeza (opcional)
  };
}, [dependencies]);

O useEffect recebe dois argumentos: uma função de efeito e um array de dependências opcional. A função de efeito é executada após cada renderização do componente, por padrão. Ela pode retornar uma função de limpeza opcional, que é executada antes da próxima execução do efeito ou quando o componente é desmontado. O array de dependências permite especificar valores que, quando alterados, acionam a re-execução do efeito. Vejamos um exemplo de como usar o useEffect para atualizar o título da página com base em um contador:

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

function Exemplo() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Você clicou ${count} vezes`;
  }, [count]);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

export default Exemplo;

Neste exemplo, importamos os Hooks useState e useEffect do pacote 'react'. Declaramos uma variável de estado count usando o useState e inicializamos seu valor como 0. Em seguida, usamos o useEffect para atualizar o título da página sempre que o valor de count for alterado. A função de efeito é definida como () => { document.title = Você clicou ${count} vezes; }, que atualiza o título da página com a contagem atual. O array de dependências [count] especifica que o efeito deve ser re-executado apenas quando o valor de count mudar. Agora, vamos ver um exemplo de como usar o useEffect para fazer uma chamada à API e atualizar o estado com os dados retornados:

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

function Exemplo() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  if (!data) {
    return <div>Carregando...</div>;
  }

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

export default Exemplo;

Neste exemplo, declaramos uma variável de estado data usando o useState e inicializamos seu valor como null. Dentro do useEffect, fazemos uma chamada à API usando a função fetch. Quando a resposta é recebida, convertemos os dados para o formato JSON e atualizamos o estado data usando a função setData. O array de dependências vazio [] garante que o efeito seja executado apenas uma vez, após a montagem inicial do componente.

No JSX retornado, verificamos se data é nulo. Se for, exibimos uma mensagem de "Carregando...". Caso contrário, renderizamos o título e a descrição obtidos dos dados da API.

Para efeitos didádicos, vamos ver um exemplo de como usar o useEffect para simular uma chamada à API com dados mockados e atualizar o estado com os dados:

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

function Exemplo() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const mockData = {
      title: 'Título do Exemplo',
      description: 'Descrição do exemplo usando dados mockados.'
    };

    setTimeout(() => {
      setData(mockData);
    }, 1500);
  }, []);

  if (!data) {
    return <div>Carregando...</div>;
  }

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

export default Exemplo;

Neste exemplo, declaramos uma variável de estado data usando o useState e inicializamos seu valor como null. Dentro do useEffect, simulamos uma chamada à API usando dados mockados. Declaramos um objeto mockData que contém um título e uma descrição fictícios. Usamos a função setTimeout para simular um atraso de 1,5 segundos antes de atualizar o estado data com os dados mockados.

Como no exemplo anterior, no JSX retornado, verificamos se data é nulo. Se for, exibimos uma mensagem de "Carregando...". Após o atraso simulado, o estado data é atualizado com os dados mockados e o componente é renderizado novamente, exibindo o título e a descrição.

O useEffect também permite executar uma função de limpeza antes da próxima execução do efeito ou quando o componente é desmontado. Isso é útil para cancelar assinaturas, limpar temporizadores ou liberar recursos. Aqui está um exemplo:

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

function Exemplo() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      <p>Contagem: {count}</p>
    </div>
  );
}

export default Exemplo;

Neste exemplo, usamos o useEffect para configurar um temporizador que incrementa o count a cada segundo. A função de limpeza () => { clearInterval(timer); } é retornada pelo efeito e é executada quando o componente é desmontado, garantindo que o temporizador seja limpo e evitando vazamentos de memória.

Conclusão

Neste tutorial, exploramos dois Hooks fundamentais fornecidos pelo React: o useState e o useEffect. Esses Hooks permitem adicionar estado e executar efeitos colaterais em componentes funcionais, proporcionando uma maneira mais simples e concisa de lidar com o gerenciamento de estado e o ciclo de vida do componente.

O Hook useState nos permite adicionar estado a um componente funcional, eliminando a necessidade de escrever uma classe. Ele retorna um par contendo o valor do estado atual e uma função para atualizá-lo. Podemos usar o useState para gerenciar qualquer tipo de dado, desde valores primitivos até objetos complexos.

O Hook useEffect, por sua vez, nos permite executar efeitos colaterais em componentes funcionais. Ele combina os métodos de ciclo de vida componentDidMount, componentDidUpdate e componentWillUnmount em uma única API. Com o useEffect, podemos realizar ações como buscar dados de uma API, subscrever eventos, modificar o DOM ou executar qualquer outra operação que possa afetar o estado do componente ou interagir com o mundo externo.

Os Hooks useState e useEffect são apenas dois exemplos dos muitos Hooks disponíveis no React. Existem outros Hooks internos, como useContext, useRef, useMemo e useCallback, que fornecem recursos adicionais para lidar com contexto, referências, memoização e otimização de desempenho. Além disso, o React permite criar Hooks personalizados, possibilitando a reutilização da lógica stateful entre componentes.

Referências

1. React.Introdução aos Hooks. Documentação oficial do React. Disponível em: https://pt-br.reactjs.org/docs/hooks-intro.html.
2. React. Hooks de Estado. Documentação oficial do React. Disponível em: https://pt-br.reactjs.org/docs/hooks-state.html.
3. React. Hooks de Efeito. Documentação oficial do React. Disponível em: https://pt-br.reactjs.org/docs/hooks-effect.html.
4. React. Apresentando Hooks. Blog oficial do React. Disponível em: https://pt-br.reactjs.org/blog/2018/11/27/react-16-roadmap.html#introducing-hooks.
5. Scrimba. Introdução aos React Hooks. Curso interativo online. Disponível em: https://scrimba.com/learn/reacthooks.
6. Web Dev Simplified. React Hooks Explained. Vídeo do YouTube. Disponível em: https://www.youtube.com/watch?v=TNhaISOUy6Q.