Entenda o useEffect em React

O useEffect é um dos Hooks mais poderosos e versáteis do React, permitindo que você realize efeitos colaterais em seus componentes funcionais. Se você está começando com o React, o useEffect pode parecer um pouco confuso no início. Mas não se preocupe! Este guia completo irá te ajudar a dominar o** useEffect** e usá-lo com maestria em seus projetos.

• O que é um efeito colateral?

Em termos de React, um efeito colateral é qualquer operação que não faz parte da renderização principal do componente, como:

Buscar dados: Obter informações de APIs ou do armazenamento local.

Assinaturas: Criar ou remover assinaturas de eventos ou fontes de dados.

Manipulação manual do DOM: Acessar e modificar diretamente o DOM, algo geralmente desencorajado, mas necessário em alguns casos.

Temporizadores: Executar ações após um atraso específico ou periodicamente.

Função de efeito: Essa função define o efeito colateral que você deseja realizar. Ela geralmente inclui tarefas como fazer chamadas de API, configurar assinaturas ou agendar temporizadores.
Array de dependências (opcional): Este array especifica quais valores o efeito deve depender. Quando qualquer um desses valores muda, o React reexecuta o efeito, garantindo que ele seja executado apenas quando necessário.
Pontos-chave a serem lembrados:

useEffect é chamado depois de cada renderização, incluindo a renderização inicial.
O efeito é executado depois do ciclo de renderização principal, garantindo que as atualizações da interface do usuário não sejam interferidas por efeitos colaterais.
O array de dependências opcional controla quando o efeito é reexecutado. Se nenhum array for fornecido, o efeito será executado após cada renderização. Um array vazio [] indica que o efeito é executado apenas na renderização inicial.
A função de efeito pode retornar, opcionalmente, uma função de limpeza que é executada antes que o componente seja desmontado ou antes que um efeito subsequente seja executado. Isso permite que você execute qualquer tarefa de limpeza necessária, como cancelar a assinatura de ouvintes de eventos ou limpar temporizadores.

> Dominando o useEffect:

Evite mutações diretas no DOM: Use o useEffect para abstrair o acesso ao DOM e evitar efeitos colaterais indesejados.

**Gerencie o estado com cuidado: **O useEffect pode ser usado para atualizar o estado, mas lembre-se de usar funções de atualização para evitar mutações acidentais.

Otimize o desempenho: Use o array de dependências para evitar reexecuções desnecessárias do efeito.

Limpe seus efeitos: Use a função de limpeza para cancelar assinaturas e liberar recursos quando o componente for desmontado.