Perguntas para Entrevista de Desenvolvedor Frontend — Mais de 30 Perguntas e Respostas de Especialistas

O desenvolvimento frontend continua sendo um dos segmentos mais competitivos do mercado de contratação em tecnologia. De acordo com o Front End Interview Handbook, candidatos em empresas de destaque enfrentam de quatro a seis rodadas de entrevista cobrindo fundamentos de JavaScript, domínio de frameworks, design de sistemas e avaliação comportamental [1]. Apenas 3% dos candidatos recebem convites para entrevista, e a proporção entre entrevista e contratação é de aproximadamente 27% [2]. Em 2025–2026, os gestores de contratação estão elevando o nível — avaliando não apenas proficiência em React ou Vue, mas também expertise em acessibilidade, otimização de performance, adoção de TypeScript e capacidade de colaborar com designers e engenheiros de backend em interfaces de produto complexas [3]. As perguntas abaixo refletem o que as equipes de engenharia frontend realmente perguntam.

Pontos-Chave

• Entrevistas de frontend testam profundamente os fundamentos de JavaScript — closures, event loop, herança prototípica — independentemente do framework utilizado [1].
• React permanece dominante, mas os entrevistadores investigam cada vez mais a compreensão de padrões de renderização, Server Components e arquitetura de gerenciamento de estado.
• Acessibilidade (conformidade com WCAG) e otimização de performance não são mais diferenciais — são requisitos nas entrevistas de 2025–2026 [3].
• Exercícios de construção de componentes UI testam habilidades práticas de implementação que perguntas algorítmicas não conseguem avaliar.
• Perguntas comportamentais focam na colaboração multifuncional com designers, gerentes de produto e equipes de backend.

Perguntas Comportamentais

Desenvolvedores frontend trabalham na interseção entre engenharia, design e experiência do usuário. Perguntas comportamentais avaliam como você navega entre prioridades concorrentes e colabora entre disciplinas [4].

1. Descreva uma situação em que você questionou um design que era tecnicamente difícil de implementar ou prejudicaria a performance. Como você conduziu a conversa?

Use o STAR: Situação (um designer propôs uma galeria com rolagem infinita e animações complexas que causariam travamentos em dispositivos móveis), Tarefa (encontrar uma solução que preservasse a intenção do design mantendo a performance em 60fps), Ação (fez o profiling da abordagem proposta, demonstrou o impacto na performance com gravações do Chrome DevTools e propôs uma alternativa usando Intersection Observers e otimização will-change), Resultado (entregou uma experiência visualmente equivalente que manteve a rolagem suave em todas as categorias de dispositivos).

2. Conte sobre uma vez em que você melhorou a acessibilidade de um produto existente.

Discuta a auditoria da aplicação com axe ou Lighthouse, a identificação de problemas críticos (texto alternativo ausente, armadilha de teclado em modais, contraste de cores insuficiente), a priorização das correções por nível de conformidade WCAG e a mensuração da melhoria. Quantifique o impacto: "Elevei o site de 47 para 94 no Lighthouse de acessibilidade, resolvendo 23 violações do WCAG 2.1 AA" [3].

3. Descreva uma situação em que você precisou aprender um novo framework ou biblioteca com prazo apertado. Como se tornou produtivo rapidamente?

Mostre aprendizado sistemático: leitura da documentação oficial primeiro, construção de um pequeno protótipo, estudo do código-fonte do framework para casos extremos e aproveitamento de recursos da comunidade. Mencione como documentou padrões para a equipe.

4. Conte sobre uma vez em que precisou equilibrar o desenvolvimento de funcionalidades com a resolução de dívida técnica em uma base de código frontend.

Discuta a proposta de abordagem "regra do escoteiro" (deixar cada arquivo melhor do que encontrou), alocação de capacidade do sprint para dívida técnica ou defesa de uma iniciativa dedicada de refatoração. Mostre que quantificou o impacto da dívida técnica — crescimento do tamanho do bundle, instabilidade nos testes, velocidade de desenvolvimento.

5. Descreva como você colaborou com uma equipe de backend no design de API para uma funcionalidade frontend.

Demonstre discussão proativa sobre o contrato de API — propondo esquemas de resposta que minimizem a transformação de dados no frontend, negociando estratégias de paginação e discutindo formatos de resposta de erro. Mencione o uso de ferramentas como especificações OpenAPI ou esquemas GraphQL como contratos compartilhados.

Perguntas Técnicas

Perguntas técnicas exploram profundidade em JavaScript, compreensão de frameworks e padrões de arquitetura frontend [5].

1. Explique o event loop do JavaScript e como ele lida com operações assíncronas.

O event loop processa primeiro a pilha de chamadas, depois verifica as filas de microtasks (Promises, queueMicrotask) e então as filas de macrotasks (setTimeout, setInterval, I/O). Quando a pilha de chamadas está vazia, todos os microtasks pendentes são executados antes do próximo macrotask. Isso explica por que Promise.resolve().then(...) executa antes de setTimeout(..., 0). Compreender isso é essencial para depurar race conditions e comportamento de renderização [5].

2. Qual é a diferença entre null, undefined e undeclared em JavaScript?

undefined é uma variável declarada que não recebeu um valor — é o padrão. null é um valor vazio explicitamente atribuído. undeclared é uma variável que não foi declarada — referenciá-la lança um ReferenceError no modo estrito. Na comparação solta, null == undefined é true, mas null === undefined é false. Discuta como as verificações estritas de null do TypeScript ajudam a detectar esses problemas em tempo de compilação.

3. Explique o algoritmo de reconciliação do React e como o Virtual DOM melhora a performance.

O React cria uma representação do UI na memória (Virtual DOM). Quando o estado muda, o React constrói uma nova árvore Virtual DOM, compara com a anterior (reconciliação) e calcula o conjunto mínimo de mutações reais no DOM necessárias. O algoritmo de comparação usa o tipo do componente e as propriedades key para identificar mudanças eficientemente. Discuta como React.memo, useMemo e useCallback ajudam a prevenir rerenderizações desnecessárias [1].

4. Como você implementaria um componente de busca com debounce em React?

Crie um hook customizado que envolve useCallback com um timeout: limpe o timeout anterior a cada tecla pressionada, defina um novo timeout (tipicamente 300ms) e chame a função de busca apenas quando a digitação parar. Discuta a diferença entre debouncing (esperar até a atividade parar) e throttling (limitar a frequência). Aborde a limpeza no useEffect para prevenir vazamentos de memória quando o componente é desmontado [5].

5. O que são React Server Components e como diferem do renderização tradicional no servidor?

O SSR tradicional renderiza a página inteira no servidor e hidrata no cliente. React Server Components (RSC) renderizam no servidor sem enviar seu JavaScript para o cliente — reduzindo o tamanho do bundle. RSC podem acessar recursos do servidor diretamente (bancos de dados, sistemas de arquivos) e transmitir sua saída para o cliente. Client Components lidam com a interatividade. Discuta os trade-offs: RSC reduz o JavaScript do lado do cliente, mas requer arquitetura cuidadosa para separar os limites entre servidor e cliente [3].

6. Como você otimizaria os Core Web Vitals de uma aplicação web (LCP, FID/INP, CLS)?

LCP (Largest Contentful Paint): otimizar o caminho crítico de renderização, pré-carregar imagens hero, usar imagens responsivas com srcset. FID/INP (Interaction to Next Paint): minimizar o bloqueio da thread principal com code-splitting, adiamento de JavaScript não crítico e uso de requestIdleCallback. CLS (Cumulative Layout Shift): definir dimensões explícitas em imagens e embeds, evitar inserção de conteúdo acima da dobra após o carregamento, usar font-display: swap com size-adjust para fontes web [1].

7. Explique a especificidade CSS e como a cascata resolve estilos conflitantes.

Hierarquia de especificidade: estilos inline (1000) > seletores de ID (100) > seletores de classe/atributo/pseudo-classe (10) > seletores de elemento/pseudo-elemento (1). Quando a especificidade é igual, a última regra na ordem do código vence. !important sobrescreve a especificidade, mas deve ser evitado no código da aplicação. Discuta CSS Layers (@layer) como uma abordagem moderna para gerenciar a prioridade da cascata em grandes bases de código.

Perguntas Situacionais

Perguntas situacionais apresentam desafios frontend realistas para avaliar sua abordagem de resolução de problemas [4].

1. Usuários relatam que sua aplicação single-page parece lenta em conexões 3G. Como você diagnostica e melhora a experiência?

Faça profiling com Chrome DevTools em rede limitada: verifique o tamanho do bundle (você está enviando 2MB de JavaScript?), identifique recursos que bloqueiam a renderização e meça o Time to Interactive. Soluções: code-splitting com import() dinâmico, tree-shaking de dependências não utilizadas, implementação de service workers para cache offline, carregamento lazy de componentes abaixo da dobra e compressão de assets com Brotli.

2. Sua equipe está debatendo entre usar uma biblioteca de gerenciamento de estado global (Redux, Zustand) ou o Context nativo do React e useState. Como você avalia essa decisão?

Considere a complexidade da aplicação: Context funciona bem para atualizações de baixa frequência (tema, estado de autenticação), mas causa rerenderizações desnecessárias quando usado para estado de alta frequência (inputs de formulário, dados em tempo real). Bibliotecas de estado global fornecem assinaturas granulares. Avalie a familiaridade da equipe, o custo de manutenção e se o gerenciamento de estado do servidor (React Query, SWR) pode substituir a maior parte das necessidades de estado global.

3. Um gerente de produto quer fazer teste A/B de um novo fluxo de checkout, mas a base de código atual não tem infraestrutura de feature flags. Como você aborda isso?

Implemente um sistema leve de feature flags: um provider de contexto que lê flags de uma API ou variável de ambiente, verificações de flags no nível do componente e disciplina de limpeza para remover flags após a conclusão dos experimentos. Para validação rápida, use um serviço de terceiros (LaunchDarkly, Unleash). Discuta como prevenir o acúmulo de flags e manter a legibilidade do código.

4. Você descobre que um script de analytics de terceiros está adicionando 500ms ao tempo de carregamento da página. A equipe de marketing insiste que ele fique. O que você faz?

Carregue o script de forma assíncrona com defer ou async. Se ainda bloquear, carregue-o após a renderização do conteúdo principal usando injeção dinâmica. Considere carregá-lo apenas após interação do usuário (scroll, clique) se analytics em tempo real não forem necessários. Apresente dados à equipe de marketing mostrando o impacto na conversão dos 500ms adicionais de tempo de carregamento para negociar um compromisso.

5. A equipe de design entrega uma biblioteca de componentes com 40 componentes. Como você arquiteta isso para reutilização em múltiplos produtos?

Construa uma biblioteca de componentes com limites de API claros: interfaces TypeScript para props, Storybook para documentação e testes visuais, e padrões de componentes headless (lógica separada da estilização) para máxima flexibilidade. Discuta estratégias de monorepo vs. pacote publicado, gerenciamento de versões e testes automatizados de regressão visual.

Perguntas para Fazer ao Entrevistador

Perguntas específicas de frontend demonstram maturidade em engenharia e ajudam a avaliar a equipe [1].

1. Qual é a arquitetura frontend atual — monolito, micro-frontends ou outra abordagem? — Revela a complexidade técnica e os planos de modernização.
2. Como a equipe gerencia a governança do design system e a manutenção da biblioteca de componentes? — Mostra se a consistência da UI é priorizada.
3. Qual é a abordagem da equipe para testes — unitários, integração, regressão visual e E2E? — Indica a cultura de qualidade.
4. Como vocês medem e acompanham a performance web (Core Web Vitals, tamanho do bundle)? — Revela se a performance é monitorada ou apenas aspiracional.
5. Qual é o processo de deploy para mudanças frontend — feature flags, canary releases ou deploy direto? — Mostra a maturidade do CI/CD.
6. Como as equipes de frontend e backend colaboram no design de API? — Revela os padrões de comunicação entre equipes.

Formato da Entrevista e o que Esperar

Entrevistas de frontend tipicamente abrangem de quatro a seis rodadas com tipos de avaliação distintos [1].

Triagem por Telefone (30–45 minutos): Um recrutador ou gerente de engenharia avalia sua formação, experiência frontend e motivação. Algumas empresas incluem um breve quiz de JavaScript.

Rodada de Codificação JavaScript (60 minutos): Resolva problemas algorítmicos em JavaScript ou implemente funções utilitárias (debounce, throttle, deep clone, Promise.all). Foco em JavaScript limpo e idiomático.

Construção de Componente UI (60–90 minutos): Construa um componente UI funcional — dropdown de autocompletar, tabela de dados com ordenação ou sistema de modais. São avaliados organização do código, gerenciamento de estado, tratamento de eventos e acessibilidade.

Rodada de Design de Sistema (45–60 minutos): Projete a arquitetura frontend para uma funcionalidade — galeria de imagens, dashboard em tempo real ou página de produto de e-commerce. Discuta hierarquia de componentes, estratégia de busca de dados, cache e performance.

Rodada Comportamental (45–60 minutos): Perguntas sobre colaboração multifuncional, tomada de decisão técnica e gerenciamento de prioridades concorrentes.

Como se Preparar

A preparação para entrevista frontend deve cobrir fundamentos, padrões de frameworks e habilidades práticas de construção [5].

Domine os Fundamentos de JavaScript: Closures, herança prototípica, event loop, binding de this e funcionalidades ES6+ (desestruturação, spread, módulos, async/await). Esses temas aparecem em todas as entrevistas, independentemente do framework.

Pratique a Construção de Componentes: Implemente padrões comuns de UI do zero: autocompletar, scroll infinito, drag-and-drop, modal com armadilha de foco e dropdown acessível. Use o componente como veículo para demonstrar gerenciamento de estado, tratamento de eventos e acessibilidade.

Estude React em Profundidade: Entenda o ciclo de vida do componente, hooks (especialmente limpeza do useEffect), características de performance do context e funcionalidades concurrent. Se a vaga usa Next.js, estude Server Components e App Router.

Aprenda Acessibilidade: Estude as diretrizes WCAG 2.1, atributos ARIA, padrões de navegação por teclado e comportamento de leitores de tela. Perguntas sobre acessibilidade são cada vez mais comuns em entrevistas frontend [3].

Prepare Histórias de Performance: Tenha exemplos específicos de melhorias de performance: redução do tamanho do bundle, melhoria dos Core Web Vitals ou otimização de renderização com métricas mensuráveis antes/depois.

Pratique Comunicação Verbal: Rodadas de design de sistema frontend exigem pensar em voz alta. Pratique explicar suas decisões de arquitetura, trade-offs e hierarquia de componentes para um colega.

Erros Comuns em Entrevistas

Evite estes erros que desqualificam candidatos frontend [4].

1. Ignorar acessibilidade. Construir um componente que não é navegável por teclado ou amigável para leitor de tela em 2025–2026 é um sinal de alerta significativo. Acessibilidade é uma expectativa básica, não um bônus.

2. Depender excessivamente do conhecimento de framework sem ter fundamentos de JavaScript. Candidatos que constroem componentes React mas não conseguem explicar closures ou o event loop carecem da base necessária para depuração complexa.

3. Não considerar dispositivos móveis. Código frontend deve funcionar em diferentes tamanhos de dispositivos e condições de rede. Candidatos que testam apenas no desktop durante entrevistas parecem limitados.

4. Pular tratamento de erros em exercícios de código. Estados de carregamento, error boundaries e casos extremos (dados vazios, falhas de rede) distinguem código pronto para produção de código demonstrativo.

5. Não discutir trade-offs de performance. Toda decisão de arquitetura tem implicações de performance. Candidatos que propõem soluções sem considerar tamanho do bundle, custo de renderização ou overhead de rede perdem o que os gestores avaliam.

6. Não ter perguntas sobre as práticas frontend da equipe. Isso sugere que você aceitará qualquer ambiente de engenharia sem avaliar a qualidade, o que não é o que equipes seniores procuram [1].

Pontos-Chave

Entrevistas de desenvolvedor frontend avaliam uma combinação de profundidade em JavaScript, expertise em frameworks, consciência de acessibilidade e habilidades de colaboração multifuncional. Prepare-se dominando os fundamentos, praticando construção de componentes e estudando otimização de performance. Os candidatos que recebem ofertas demonstram que podem construir interfaces que não são apenas visualmente corretas, mas acessíveis, performáticas e sustentáveis.

Pronto para garantir que seu currículo destaque sua expertise frontend? Experimente o verificador ATS gratuito do ResumeGeni para otimizar seu currículo de desenvolvedor frontend antes de se candidatar.

Perguntas Frequentes

Quais tópicos de JavaScript aparecem com mais frequência em entrevistas frontend? Closures, event loop, binding de this, promises e async/await, e funcionalidades ES6+ (desestruturação, módulos, arrow functions) são testados em praticamente todas as entrevistas frontend [5].

Devo aprender TypeScript para entrevistas frontend? Sim. A adoção de TypeScript em bases de código frontend excede 80% em muitas empresas. Demonstrar proficiência em TypeScript sinaliza prática moderna e detecta problemas relacionados a tipos que entrevistas JavaScript deixam escapar [3].

Quão importante é o conhecimento de CSS em entrevistas frontend? Muito. Espere perguntas sobre especificidade, flexbox, grid, design responsivo e arquitetura CSS (BEM, CSS Modules, CSS-in-JS). Algumas entrevistas incluem exercícios de codificação focados em CSS.

Entrevistas frontend incluem perguntas de algoritmos? Sim, embora tipicamente mais leves que entrevistas de backend ou engenharia de software geral. Espere manipulação de arrays e strings, travessia básica de árvores/grafos (para operações DOM) e implementação de funções utilitárias [1].

Como me preparar para a rodada de construção de componente UI? Pratique construindo de 5 a 7 componentes comuns do zero — primeiro sem framework, depois em React. Foque em navegação por teclado, atributos ARIA e casos extremos (estado vazio, carregamento, erro).

Qual é a habilidade mais importante para entrevistas frontend de nível sênior? Design de sistema e tomada de decisão arquitetural. Candidatos seniores devem explicar como estruturar uma aplicação frontend para escala — bibliotecas de componentes, gerenciamento de estado, code splitting e padrões de micro-frontends [4].

Devo aprender Next.js para entrevistas frontend? Se a empresa o utiliza, com certeza. Conhecimento de Next.js (App Router, Server Components, middleware) é um diferencial significativo para vagas focadas em React em 2025–2026 [3].