Question 1

Qual é a principal diferença entre let e var?

Accepted Answer

let declara uma variável com escopo de bloco, o que significa que ela só existe dentro do bloco onde é definida (entre chaves). var tem escopo de função, o que pode causar bugs inesperados já que a variável é acessível em toda a função. Usar let por padrão evita problemas de hoisting e vazamento de variáveis em loops ou condicionais.

Question 2

O que é JSX no React?

Accepted Answer

JSX é uma extensão de sintaxe do JavaScript que permite escrever markup semelhante a HTML diretamente no código JavaScript. Ele é transformado em chamadas da função React.createElement pelo Babel durante a compilação. Usar JSX torna o código mais legível e permite a detecção de erros em tempo de compilação através da tipagem, combinando o poder do JavaScript com uma sintaxe familiar.

Question 3

O que é o hook useState no React?

Accepted Answer

useState é um hook do React que gerencia o estado local em um componente funcional. Ao contrário de variáveis JavaScript regulares que são reinicializadas a cada renderização, useState preserva o valor do estado entre renderizações sucessivas. Este hook retorna um array contendo o valor atual do estado e uma função para atualizá-lo, acionando automaticamente uma nova renderização do componente quando o estado muda.

Question 4

O que é mounting em um componente React?

Accepted Answer

O mounting é a fase em que um componente é criado e inserido no DOM pela primeira vez. Durante essa fase, o React inicializa o estado, executa o código de construção e realiza a primeira renderização. É o momento ideal para disparar chamadas de API ou inicializar assinaturas via useEffect.

Question 5

O que é um CSS Module no React?

Accepted Answer

CSS Modules geram automaticamente nomes de classes únicos adicionando um hash ao nome da classe, o que evita conflitos de estilos entre componentes. Cada arquivo CSS Module tem seu próprio escopo local, ao contrário das folhas de estilo globais tradicionais. Essa abordagem permite escrever estilos modulares sem o risco de sobrescritas acidentais em outros componentes.

Question 6

O que é o App Router no Next.js?

Accepted Answer

O App Router é o novo sistema de roteamento do Next.js 13+ baseado no diretório app/. Ele substitui o Pages Router e introduz Server Components por padrão, layouts compartilhados, e um modelo de roteamento mais flexível com convenções de arquivos como page.tsx, layout.tsx e loading.tsx.

Question 7

Qual é a sintaxe correta para tipar as props de um componente React?

Accepted Answer

A interface Props seguida da tipagem da função com Props como parâmetro é a sintaxe padrão recomendada. Esta abordagem oferece excelente inferência de tipos e permite reutilizar facilmente o tipo Props em outras partes do código. É mais explícita que React.FC e oferece melhor controle sobre a tipagem de children.

Question 8

Qual é o papel principal do React.memo?

Accepted Answer

React.memo é um Higher-Order Component que memoriza o resultado da renderização de um componente. Ele realiza uma comparação superficial das props e pula a re-renderização se as props não mudaram. Particularmente útil para otimizar componentes filhos custosos que recebem as mesmas props com frequência.

Question 9

O que é um Error Boundary no React?

Accepted Answer

Um Error Boundary é um componente de classe React que captura erros JavaScript que ocorrem na árvore de seus componentes filhos, exibe uma UI de fallback e evita que toda a aplicação quebre. Ele utiliza os métodos componentDidCatch() e getDerivedStateFromError() para interceptar e tratar erros de renderização.

Question 10

O que é o padrão Compound Components?

Accepted Answer

O padrão Compound Components permite criar componentes que compartilham estado implícito via React Context, sem passar props explicitamente. Esse padrão é usado em bibliotecas como Radix UI e Headless UI para fornecer uma API flexível e componível. Os componentes filhos podem acessar o estado compartilhado automaticamente, permitindo a personalização da estrutura sem perder a lógica comum.

Perguntas de entrevista de React / Next.js

Pronto para sua entrevista de React / Next.js?

Explore todos os temas de React / Next.js

Fundamentos de JavaScript

Fundamentos do React

React Hooks

Ciclo de vida dos componentes

React Router

Gerenciamento de estado com Context

Formulários e Controlled Components

Busca de dados e API

React Query (TanStack Query)

Styling & CSS-in-JS

Fundamentos do Next.js

TypeScript com React

Data Fetching no Next.js

Server Actions do Next.js

Roteamento e Navegação no Next.js

API Routes do Next.js

Metadata & SEO no Next.js

Middleware e Auth no Next.js

Testes em React

Zustand State Management

Otimização de Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Recursos avançados do Next.js

Deploy e Produção com Next.js

Architecture & Design Patterns

React Server Components

Internacionalização do Next.js

React Security & Boas Práticas

Domine React / Next.js para sua proxima entrevista