Strict Mode
Modo de desenvolvimento que expõe bugs: efeitos rodam 2x, warnings extras, detecta APIs deprecadas.
Definição
<StrictMode> é um wrapper de desenvolvimento que: 1) Executa funções de render, useState initializer, e effects DUAS VEZES (detecta side effects ocultos). 2) Avisa sobre APIs antigas. 3) Detecta uso incorreto de Context. Não afeta produção (zero overhead em build).
Problema → Solução
Problema
Side effects em renders, mutações em state, ou APIs deprecadas que funcionam mas causarão problemas em Concurrent Mode.Solução
StrictMode 'expõe' esses bugs em desenvolvimento, executando código duas vezes para deixar problemas visíveis (efeitos sem cleanup, useState com mutation, etc).Dica de entrevista
Tip
Se seu código quebra em StrictMode, é bug que vai aparecer em Concurrent Mode em produção. Sempre rode com StrictMode em dev.Código
// _app.tsx ou main.tsx
<StrictMode>
<App />
</StrictMode>
// useEffect com cleanup correto
useEffect(() => {
const controller = new AbortController();
fetch('/api', { signal: controller.signal })
.then(r => r.json())
.then(setData);
return () => controller.abort(); // cleanup
}, []);Perguntas de entrevista
Q.Por que useEffect roda 2x em StrictMode?▾
A.Para detectar effects sem cleanup adequado. React simula: monta → desmonta → monta novamente. Se cleanup está correto, comportamento é idêntico. Se não, você verá problemas (subscriptions duplicadas, etc).
Q.StrictMode afeta produção?▾
A.Não. Em build de produção, StrictMode não tem efeito. Os 'avisos' e duplicações são apenas em desenvolvimento.
Q.Como evitar duplicação em dev?▾
A.NÃO 'fugir' do StrictMode — corrigir o código. Effects devem ter cleanup. Initializers do useState devem ser puros. APIs como AbortController para cancelar fetches duplicados.
Termos relacionados
28/122← →