Como funciona o array de dependências do useEffect, e o que costuma dar errado com ele?

O React compara cada dependência com o valor dela do render anterior usando Object.is e só executa o efeito de novo se alguma mudou. Um array vazio significa rodar uma vez depois da montagem; omitir o array significa rodar depois de todo render. Dá errado quando você deixa uma dependência de fora e captura um valor obsoleto, ou quando você inclui um objeto ou função recriados a cada render, o que faz o efeito entrar em loop infinito.

O React guarda o array do último render e compara item por item com Object.is. Se tudo bater, ele pula o efeito; se algo diferir, ele roda o cleanup do antigo e depois o novo. O detalhe é que o efeito fecha sobre as props e o estado do render que o criou, então se eu deixo algo de fora do array eu fico com um valor obsoleto que envelhece em silêncio. O outro lado disso é colocar um objeto ou uma arrow function ali dentro, porque essas são referências novas a cada render, então o efeito roda em loop. Meus consertos de sempre são updates de estado funcionais, para eu não precisar do valor atual como dependência, içar constantes para fora do componente, e só embrulhar um callback quando ele realmente precisa ser dependência. Sinceramente, porém, a primeira pergunta que eu faço é se o efeito deveria existir. A maioria dos efeitos que eu já deletei calculava estado derivado, o que é só uma conta durante o render, ou buscava dados que pertenciam ao router ou a uma biblioteca de query.