O hook useEffect nos permite sincronizar o componente com fatores ou serviços externos, incluindo a busca de dados, inscrições, alterações manuais, etc.

Sintaxe:

O primeiro argumento (setup) é uma função de seta (arrow function) que será executada após cada renderização. O segundo argumento (dependencies) é um array opcional de dependências. Se as dependencies forem fornecidas, o efeito só será reexecutado se uma das dependências tiver mudado desde a última renderização. Se o array de dependências for omitido, o efeito será executado após cada renderização.

Sabendo que o setup deve ser uma função de seta e as dependencies devem ser um array, obtemos o seguinte registro do hook useEffect.

Nota

Os componentes do React geralmente dependem da combinação dos hooks useEffect e useState. Esses hooks trabalham em conjunto para gerenciar o estado e os efeitos colaterais dentro dos componentes.

Exemplo 1:

Vamos criar o componente Articles, que utilizará o hook useEffect para atribuir dados ao estado articles. Esta é uma ótima oportunidade para explorar a combinação poderosa dos hooks do React.

Dentro deste componente, usamos o hook useEffect para garantir que o estado articles seja preenchido com dados. Como mencionado anteriormente, a função useEffect executa após cada renderização, garantindo que os dados serão exibidos para o usuário se obtidos. Isso garante uma experiência de usuário contínua com conteúdo atualizado.

Explicação linha por linha:

• Linha 1: Importamos os hooks useEffect e useState da biblioteca React para aproveitar sua funcionalidade.
• Linha 2: Importamos a função fetchData de "../service/api". Esta função é responsável por realizar uma solicitação de API e buscar dados.
• Linha 4: O componente Articles é definido utilizando a sintaxe de função convencional.
• Linha 5: Inicializamos o estado usando o hook useState, representando o valor inicial da variável articles. Neste exemplo, é um array vazio.
• Linhas 7-15: O caso de uso real do hook useEffect.
  • Linha 7 e linha 15: é a sintaxe. É assim que vamos usá-lo.
  • Linha 8: a função fetchData é chamada. Espera-se que esta função faça uma solicitação de API e retorne uma promise.
  • Linhas 9-11: Quando a promise é resolvida (bloco then), ela recebe um objeto resp. Os dados são extraídos de resp usando resp.jokes, que é inserido no estado articles usando setArticles.
  • Linhas 12-14: Se houver um erro durante a solicitação da API (no bloco catch), ele é registrado no console usando console.error.
• Linhas 17-19: A marcação do componente é renderizada.

Código completo do aplicativo:

Exemplo 2:

Vamos criar o componente Counter para rastrear um valor counter. A tarefa é registrar o valor da variável counter sempre que ela mudar. Para alcançar isso, utilizaremos o hook useEffect com um array de dependências que consiste na variável counter.

Explicação linha por linha:

• Linha 1: Importamos os ganchos useEffect e useState da biblioteca do React para aproveitar sua funcionalidade.
• Linha 3: A sintaxe de função convencional define o componente "Counter".
• Linha 4: Inicializamos o estado usando o gancho useState, representando o valor inicial da variável count. Neste exemplo, é 0.
• Linhas 6-8: O caso de uso real do gancho useEffect.
  • Linha 7: essa lógica ocorrerá sempre que o valor no array de dependências mudar. Neste caso, é a variável count.
  • Linha 8: array de dependências. Informamos ao React que, quando o valor da variável count for alterado, execute o código dentro da função do gancho useEffect
• Linhas 14-19: A marcação do componente é renderizada.

Código completo do aplicativo:

Por favor, reserve um momento para inspecionar o console e observar a lógica de execução da função de seta dentro do hook useEffect. A função de seta é executada inicialmente na renderização inicial e, em seguida, chamada novamente sempre que o valor da variável counter muda. Você pode verificar esse comportamento observando os registros correspondentes no console.