Efeitos no React

Antes de examinarmos a aplicação do hook useEffect, precisamos entender o que são efeitos no React.

Efeitos ou efeitos colaterais (side effects) são ações adicionais que permitem a um componente conectar-se e sincronizar-se com sistemas externos.

Por sistemas externos, entende-se aqueles trechos de código ou aplicações, que não são controlados pelo React. Isso inclui trabalho com rede, DOM do navegador, animação, widgets escritos usando bibliotecas de UI de terceiros, e outras aplicações, criadas não em React.

Os efeitos permitem executar código após a renderização, dando assim a possibilidade de sincronizar seu componente com tais sistemas fora do React.

Os efeitos podem ser executados nos momentos de renderização inicial do componente, no momento da alteração de um valor observado ou quando o ciclo de vida do componente é encerrado.

É preciso lembrar que os efeitos são uma espécie de saída de emergência do React, não se deve abusar deles.