Question 1

Cos'è un Error Boundary in React?

Accepted Answer

Un Error Boundary è un componente di classe React che cattura gli errori JavaScript che si verificano nell'albero dei suoi componenti figli, mostra un'interfaccia di fallback e impedisce il crash dell'intera applicazione. Utilizza i metodi componentDidCatch() e getDerivedStateFromError() per intercettare e gestire gli errori di rendering.

Question 2

Perché usare Error Boundaries invece del classico try/catch in React?

Accepted Answer

I blocchi try/catch non possono catturare errori che si verificano durante il rendering dei componenti React, poiché questi errori si propagano nell'albero in modo asincrono. Gli Error Boundaries sono progettati specificamente per intercettare errori di rendering, errori del ciclo di vita e errori dei costruttori nei componenti figli, mentre try/catch funziona solo per codice imperativo sincrono.

Question 3

Quale metodo del ciclo di vita permette di catturare un errore in un Error Boundary?

Accepted Answer

componentDidCatch(error, info) è il metodo del ciclo di vita invocato dopo che un errore è stato catturato dall'Error Boundary. Riceve l'errore e un oggetto info contenente componentStack, permettendo il logging dell'errore o azioni di side-effect. Si noti che getDerivedStateFromError() è anche usato ma per aggiornare lo state e mostrare la fallback UI.

Error Boundaries & Error Handling

Cos'è un Error Boundary in React?

Risposta

Perché usare Error Boundaries invece del classico try/catch in React?

Risposta

Quale metodo del ciclo di vita permette di catturare un errore in un Error Boundary?

Risposta

Qual è il ruolo di getDerivedStateFromError() in un Error Boundary?

Qual è la differenza tra getDerivedStateFromError() e componentDidCatch()?

Altri argomenti di colloquio React / Next.js

Fondamenti di JavaScript

Fondamenti di React

React Hooks

Ciclo di vita dei componenti

React Router

Gestione dello state con Context

Form e Controlled Components

Recupero dati e API

React Query (TanStack Query)

Styling & CSS-in-JS

Fondamentali di Next.js

TypeScript con React

Data Fetching in Next.js

Server Actions di Next.js

Routing e Navigazione in Next.js

API Routes di Next.js

Metadata & SEO in Next.js

Middleware e Auth in Next.js

Testing React

Zustand State Management

Ottimizzazione delle Performance React

Advanced React Patterns

Funzionalità avanzate di Next.js

Deploy e Produzione con Next.js

Architecture & Design Patterns

React Server Components

Internazionalizzazione di Next.js

React Sicurezza & Best Practices

Padroneggia React / Next.js per il tuo prossimo colloquio