Question 1

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 2

Por que usar Error Boundaries em vez do try/catch clássico no React?

Accepted Answer

Os blocos try/catch não conseguem capturar erros que ocorrem durante a renderização de componentes React, pois esses erros se propagam pela árvore de forma assíncrona. Os Error Boundaries são projetados especificamente para interceptar erros de renderização, de ciclo de vida e de construtores em componentes filhos, enquanto try/catch funciona apenas para código imperativo síncrono.

Question 3

Qual método do ciclo de vida permite capturar um erro em um Error Boundary?

Accepted Answer

componentDidCatch(error, info) é o método do ciclo de vida invocado após um erro ser capturado pelo Error Boundary. Ele recebe o erro e um objeto info contendo componentStack, permitindo registrar o erro ou executar ações de side-effect. Note que getDerivedStateFromError() também é usado, mas para atualizar o state e exibir a UI de fallback.

Error Boundaries & Error Handling

O que é um Error Boundary no React?

Resposta

Por que usar Error Boundaries em vez do try/catch clássico no React?

Resposta

Qual método do ciclo de vida permite capturar um erro em um Error Boundary?

Resposta

Qual é o papel de getDerivedStateFromError() em um Error Boundary?

Qual é a diferença entre getDerivedStateFromError() e componentDidCatch()?

Outros temas de entrevista 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

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