Deps instáveis no useEffect
Objetos/arrays criados inline são novos a cada render — colocá-los nas deps causa loop infinito.
Definição
O array de dependências do useEffect compara valores via Object.is (similar a ===). Objetos/arrays criados inline têm nova referência a cada render, fazendo o effect re-executar mesmo sem mudança real de valor.
Problema → Solução
Problema
options = { limit: 10 } dentro do componente: novo objeto todo render = nova referência = effect re-executa sempre.Solução
Estabilizar com useMemo, usar valores primitivos nas deps, ou mover a constante para fora.Dica de entrevista
Tip
setters do useState (setData, setLoading) são estáveis por garantia do React — não precisam estar nas deps.Código
// ✅ Solução 1: primitivos nas deps
useEffect(() => {
fetchData(query, { limit: 10 }).then(setData);
}, [query]);
// ✅ Solução 2: useMemo
const options = useMemo(() => ({ limit: 10 }), []);
// ✅ Solução 3: constante fora
const OPTIONS = { limit: 10 };Perguntas de entrevista
Q.Por que array vazio [] como deps tem warning do ESLint?▾
A.O exhaustive-deps quer que todas as variáveis externas usadas no effect estejam declaradas nas deps. [] indica 'rodar só uma vez' mas se o effect usa props/state, eles podem ficar stale (desatualizados).
Q.Quando usar [] vazio é correto?▾
A.Quando o effect realmente não depende de nenhum valor externo: setup de subscriptions globais, listeners do window/document, inicialização de bibliotecas. Mesmo assim, certifique-se que callbacks dentro são estáveis.
Q.Como evitar effect rodando duas vezes em dev?▾
A.Em StrictMode (dev), effects rodam duas vezes para detectar bugs. Não tente 'evitar' — ajuste o cleanup para ser idempotente. Em produção, roda apenas uma vez.
Termos relacionados
9/122← →