Pode explicar para que é usado o hook useEffect no React e quais tarefas ele resolve?

O hook useEffect no React é utilizado para gerir efeitos secundários em componentes funcionais. Permite executar código após a renderização do componente, por exemplo, para carregar dados, subscrever-se a eventos ou modificar o DOM.

As principais tarefas do useEffect:

• Realizar operações assíncronas (requisições a APIs).
• Subscrever-se e cancelar subscrições a eventos.
• Atualizar o estado fora do React (por exemplo, interagir com bibliotecas externas).

Exemplo de uso:

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json));
  }, []); // Array vazio significa que o efeito será executado uma única vez após a montagem

  return <div>{data ? JSON.stringify(data) : 'A carregar...'}</div>;
}

Assim, o useEffect ajuda a gerir o ciclo de vida dos componentes e a sincronizá-los com fontes de dados externas.