60 perguntas de entrevista de React com respostas curtas, corretas e com código: fundamentos, hooks, estado, renderização e performance, padrões, Server Components e React 19, e testes. Filtre por tema e nível.
Estas 60 perguntas de entrevista de React cobrem o que mais cai nas entrevistas: JSX, props e estado, hooks como useState e useEffect, keys, renderização e memo, context, error boundaries, Server Components e novidades do React 19 como useActionState. Cada uma tem uma resposta curta em linguagem simples, muitas com código, e você pode filtrar por tema e nível.
Como as perguntas estão divididas
Use os filtros para treinar uma área de cada vez, abra a resposta só depois de dizer a sua em voz alta e leia os exemplos de código como o tipo de coisa que o entrevistador pode pedir para você escrever na hora.
Estado e props, hooks (principalmente useEffect e seu array de dependências), keys em listas, re-renderização e memoização, context e busca de dados. Vagas sênior acrescentam profiling de performance, arquitetura e Server Components.
Cada vez menos. Código novo usa function components e hooks. Ainda ajuda reconhecer os métodos de ciclo de vida ao ler código antigo, e error boundaries ainda são escritos como classes.
Construa coisas pequenas do zero: uma lista de tarefas, uma caixa de busca com fetch com debounce, um modal com controle de foco. Fale enquanto programa e teste casos extremos como listas vazias e erros.
Cada vez mais, pelo menos no nível de conhecê-los: ref como prop, actions com useActionState, useOptimistic, a API use e Server Components.
Inseguro com re-renders? Veja a contagem ao vivo em
Uma biblioteca JavaScript para construir interfaces a partir de componentes. Você descreve como a tela deve ficar para os dados atuais, e o React atualiza a página quando os dados mudam.
Uma sintaxe parecida com HTML dentro do JavaScript. Uma etapa de build transforma cada tag em uma chamada de função que cria um elemento React, então você pode usar qualquer expressão JavaScript dentro de chaves.
Uma função que recebe props e retorna JSX. Os nomes começam com letra maiúscula para que o React consiga diferenciá-los das tags HTML.
As entradas que um componente pai passa para um filho, como atributos em uma tag HTML. Um componente não deve alterar as próprias props; ele recebe novas quando o pai renderiza de novo.
Props vêm do pai e são somente leitura dentro do componente. O estado pertence ao próprio componente e muda ao longo do tempo pelo seu setter, o que dispara uma nova renderização.
As keys dizem ao React qual item é qual entre renderizações, para que ele mantenha o estado e o nó do DOM certos com cada item quando a lista é reordenada, filtrada ou recebe novos itens. Use um id estável dos seus dados, não o índice do array quando a ordem pode mudar.
Use JavaScript puro: um if antes do return, o operador ternário dentro do JSX, ou && para mostrar ou não mostrar nada. Cuidado com && e números: 0 && <X /> renderiza um 0.
Um wrapper que agrupa vários elementos sem adicionar um nó no DOM. Escreva <>...</>, ou <Fragment key={...}> quando o grupo precisa de uma key em uma lista.
Passe uma função para uma prop em camelCase como onClick. O React passa um evento sintético que se comporta como o evento do navegador. Passe a própria função, não o resultado de chamá-la.
A descrição da interface como objetos simples que o React monta a cada render. O React compara a nova descrição com a anterior e aplica só as diferenças no DOM real. Essa comparação se chama reconciliação.
Dá ao componente um pedaço de estado e uma função para atualizá-lo. Chamar o setter agenda uma nova renderização com o novo valor; a variável no render atual não muda.
Quando o próximo valor depende do anterior, principalmente com várias atualizações em um mesmo evento. Cada função atualizadora recebe o valor mais recente da fila, enquanto setCount(count + 1) chamado duas vezes usa o mesmo count desatualizado nas duas.
Para sincronizar com algo fora do React depois do render: uma inscrição, um timer, um widget que não é React ou uma requisição de rede. O array de dependências diz quando rodar de novo, e a função retornada faz a limpeza.
Para calcular valores a partir de props ou estado (calcule durante o render) ou para reagir a um evento do usuário (faça o trabalho no event handler). Effects servem para sincronizar com sistemas externos.
Chame hooks só no nível superior de um componente ou custom hook, nunca dentro de loops, condições ou funções aninhadas, e só a partir de funções React. O React depende de a ordem das chamadas ser a mesma em todo render.
Para guardar um valor que sobrevive entre renders sem causar um quando muda, como um nó do DOM, o id de um timer ou um valor anterior. Leia e escreva por ref.current.
useMemo guarda em cache o resultado de um cálculo; useCallback guarda uma função. Os dois retornam a mesma coisa até uma dependência mudar, e os dois importam principalmente ao passar valores para filhos memoizados.
Uma forma de ler um valor fornecido mais acima na árvore sem passar props por todos os níveis. Todo componente que lê um context renderiza de novo quando o valor dele muda.
Quando vários valores mudam juntos ou o próximo estado depende de um tipo de ação, como um formulário em etapas ou um carrinho. O reducer mantém todas as transições em uma única função testável.
Uma função cujo nome começa com use e que chama outros hooks. Ela compartilha lógica com estado entre componentes; cada componente que a chama recebe o próprio estado.
Ele roda depois que o React altera o DOM, mas antes de o navegador pintar a tela, então você pode medir o layout e ajustar sem um flicker visível. Ele bloqueia a pintura, então use só para isso.
Para gerar um id único que bate entre a renderização no servidor e no cliente, para ligar labels, inputs e descrições. Não é feito para keys de lista.
Mover o estado compartilhado para o pai comum mais próximo dos componentes que precisam dele e depois passá-lo para baixo como props, junto com funções para alterá-lo.
O React decide se renderiza de novo comparando o valor antigo com o novo. Alterar um objeto ou array diretamente mantém a mesma referência, então o React pode pular a atualização. Crie uma nova cópia.
Um input controlado recebe o valor do estado e informa mudanças pelo onChange. Um input não controlado guarda o próprio valor no DOM, que você lê com uma ref ou no submit do formulário.
Um valor que você pode calcular a partir de props ou estado existentes, como uma lista filtrada. Guardá-lo separado significa manter duas cópias sincronizadas; calcular durante o render não sai de sincronia.
Passar props por componentes que não as usam só para chegar a um filho lá embaixo. As soluções incluem composição (passar children), context ou uma biblioteca de estado para dados realmente globais.
Quando muitos componentes distantes leem e atualizam o mesmo estado do cliente e o context causa re-renders demais, ou quando você precisa de ferramentas como devtools e middleware. Dados do servidor costumam ficar melhor em uma biblioteca de busca de dados que faz cache deles.
Em um framework com Server Components, busque no servidor. No cliente, use uma biblioteca de dados ou um effect que inicia a requisição, trata carregamento e erros, e ignora o resultado se o componente foi desmontado ou a entrada mudou.
Não. As atualizações entram em fila e são agrupadas; o React 18 e versões posteriores agrupam também atualizações vindas de timeouts e promises, não só de event handlers. O novo valor aparece no próximo render.
O estado dele muda, o pai renderiza de novo ou um context que ele lê muda. Um re-render nem sempre altera o DOM; o React atualiza só o que mudou.
Ele pula a nova renderização de um componente quando as props são superficialmente iguais às da vez anterior. Só compensa quando o componente renderiza com frequência com as mesmas props e o render dele não é barato.
Um wrapper só de desenvolvimento que faz verificações extras: renderiza componentes e roda effects duas vezes para expor efeitos colaterais e cleanup faltando. Não faz nada em produção.
Grave a interação no Profiler do React DevTools em um build de produção, procure componentes que renderizam com frequência ou demoram, e corrija a causa: mova o estado para baixo, memoize ou virtualize listas longas.
Uma forma de marcar uma atualização como não urgente. O React mantém o input responsivo e pode interromper o render lento, e o isPending permite mostrar que há trabalho em andamento.
Ele dá uma cópia de um valor que pode ficar para trás durante renderizações pesadas. Digitar atualiza o input na hora enquanto a lista pesada renderiza com o valor adiado.
Virtualize: renderize só as linhas visíveis com uma biblioteca como react-window ou TanStack Virtual. Paginar ou carregar mais ao rolar também limita o número de nós no DOM.
Carregar partes do app só quando são necessárias. React.lazy com um import dinâmico e um fallback de Suspense separa um componente em um arquivo próprio.
Conectar o React a um HTML que foi renderizado no servidor, para que a marcação existente fique interativa sem ser reconstruída. Se o cliente renderizar algo diferente, o React acusa um hydration mismatch.
Uma ferramenta de build que analisa componentes e adiciona memoização automaticamente, de modo que boa parte do useMemo, useCallback e memo escritos à mão deixa de ser necessária. Ela espera código que siga as regras do React.
Construir componentes colocando outros dentro deles, muitas vezes por children ou outras props. Componentes React compartilham comportamento por composição e hooks, e o time do React não encontrou nenhum caso em que hierarquias de herança ajudem.
Tudo o que você coloca entre a tag de abertura e a de fechamento de um componente. Ela permite que um componente de layout ou wrapper renderize conteúdo que ele não conhece.
Uma função que recebe um componente e retorna um novo com comportamento extra. Custom hooks substituíram a maioria dos usos, porque compartilham lógica sem envolver o componente e renomear props.
Um componente que captura erros lançados ao renderizar os filhos e mostra um fallback em vez de uma página em branco. Ele ainda é escrito como classe com getDerivedStateFromError, ou com uma pequena biblioteca.
Renderizar children em outro nó do DOM, como document.body, com createPortal. É usado em modais e tooltips que precisam escapar do overflow ou do empilhamento de um pai.
No React 19, function components aceitam ref como uma prop normal. Em versões anteriores, envolva o filho em forwardRef. Use useImperativeHandle para expor só alguns métodos.
Um grupo de componentes que funcionam juntos e compartilham estado por context, como Tabs com Tabs.List e Tabs.Panel. Quem usa organiza as partes enquanto o pai cuida da lógica.
Componentes que rodam só no servidor e enviam ao navegador o resultado renderizado, não o código. Eles podem ler dados diretamente; partes interativas ficam em Client Components marcados com "use client".
Marca um arquivo como o início do código de cliente: esse módulo e o que ele importa vão para o bundle do navegador e podem usar estado, effects e event handlers.
Funções async que rodam no servidor mas podem ser chamadas pelo cliente, na maioria das vezes como action de formulário. Trate cada uma como um endpoint público: valide a entrada e verifique permissões.
Ele envolve uma função de action e retorna o resultado mais recente, uma action envolvida para passar ao formulário e uma flag de pendente. É a forma do React 19 de mostrar retorno em formulários.
Uma API do React 19 que lê o valor de uma promise ou de um context durante o render. Ao contrário dos hooks, pode ser chamada dentro de condições; com uma promise, ela suspende até o valor ficar pronto.
Ele mostra na hora o resultado esperado de uma action, como um novo comentário, enquanto a requisição ainda está rodando, e depois assume o resultado real quando ele chega.
Um componente que mostra um fallback enquanto algo dentro dele não está pronto, como código carregado sob demanda ou dados em um framework que dá suporte a isso. Com renderização no servidor, permite que partes da página cheguem por streaming depois.
Renderize com React Testing Library em um test runner como Vitest ou Jest, interaja como um usuário faria (clicar, digitar) e verifique o que está visível, não o estado interno.
Consultas como getByRole("button", { name: "Save" }) encontram elementos do jeito que as tecnologias assistivas encontram, então os testes também verificam se a interface é acessível e resistem a mudanças na marcação.
A documentação do React recomenda começar com um framework como Next.js ou React Router para apps completos. Para um app só no cliente, o Vite é uma ferramenta de build comum.
Use elementos HTML semânticos, coloque label em todo input, gerencie o foco em diálogos, mantenha acesso por teclado em tudo que é clicável e teste com um leitor de tela e um verificador automático.
Sirva HTML real para cada URL com renderização no servidor, geração estática ou pré-renderização, dê a cada rota o próprio title e meta description, e liste as URLs em um sitemap.
Keys corretas em listas, effects com dependências completas e cleanup, nenhum estado que poderia ser derivado, marcação acessível, estados de erro e carregamento, e nenhum segredo no código do cliente.
Todos
Júnior
Pleno
Sênior
Tema
Nível
Buscar
effect, key, memo...
{shown} de {total} perguntas
Comece grátis · Sem cartão de crédito