frontend
React
Entrevistadores de React raramente perguntam sintaxe. Eles querem saber se você entende o modelo mental: por que componentes re-renderizam, quando usar useEffect (e quando não usar), como o reconciliador decide o que atualizar no DOM.
Simulador de React
Tópicos por senioridade
Desafios práticos
Cenários reais pra resolver em voz alta, como numa entrevista de verdade — não é múltipla escolha.
- Cenário: useEffect rodando em loop infinito
Um componente React está causando um loop infinito de re-renders por causa de um useEffect. O que provavelmente está errado e como você investiga?
- Cenário: Context faz meia tela re-renderizar
Você põe o estado de tema e o de usuário num único Context, e agora componentes re-renderizam demais. Por quê, e como resolver?
Perguntas mais cobradas
ver todas →- Fácil
O que o Virtual DOM resolve de verdade
Permite um modelo declarativo de UI, calculando automaticamente as mudanças mínimas no DOM real.
- Médio
Cenário: useEffect rodando em loop infinito
Geralmente é uma dependência recriada a cada render (objeto/função inline) que nunca é 'igual' à anterior.
- Médio
Como evitar re-renders desnecessários
React.memo, useMemo, useCallback (combinado com memo) e colocar o estado no nível mais baixo possível.
- Médio
Reconciliação e o papel da prop `key` em listas
React pareia itens pela `key` pra saber o que reusar. `key={index}` muda quando a lista reordena/remove do meio → React reaproveita DOM/estado do item errado (input trocado, checkbox errado).
- Difícil
`memo`, `useMemo` e `useCallback`: quando ajudam e quando são ruído
memo/useMemo/useCallback ajudam com cálculo caro ou subárvore grande re-renderizando à toa. Sem medir, são overhead (cada um custa) e deps erradas viram bug. Perfile primeiro; conserte a causa.
- Médio
Estado derivado: por que não copiar props pra o state
`useState(props.x)` só lê a prop no primeiro render; depois divergem. Calcule valores deriváveis no render; use state só pro que é local e não derivável. Pra 'resetar com a prop', use `key`.
- Difícil
Cenário: Context faz meia tela re-renderizar
Consumidores re-renderizam quando o `value` do Provider muda de identidade (objeto novo a cada render). Memoize o value, separe Contexts por preocupação, ou use lib com selectors pra estado de alta frequência.
- Médio
Quando você NÃO precisa de useEffect
Não use efeito pra: transformar dados (calcule no render), resetar por prop (use `key`), reagir a evento (handler), buscar dados (lib de query). Efeito é pra sincronizar com sistema EXTERNO.