Question 1

Qu'est-ce qu'une Error Boundary en React ?

Accepted Answer

Une Error Boundary est un composant React class qui capture les erreurs JavaScript survenant dans l'arborescence de ses composants enfants, affiche un UI de secours (fallback) et empêche le crash complet de l'application. Elle utilise les méthodes componentDidCatch() et getDerivedStateFromError() pour intercepter et gérer les erreurs de rendu.

Question 2

Pourquoi utiliser Error Boundaries plutôt que try/catch classique en React ?

Accepted Answer

Les blocs try/catch ne capturent pas les erreurs survenant pendant le rendu des composants React, car ces erreurs remontent l'arborescence de manière asynchrone. Une Error Boundary est spécifiquement conçue pour intercepter les erreurs de rendu, de lifecycle et de constructeurs des composants enfants, alors que try/catch ne fonctionne que pour du code impératif synchrone.

Question 3

Quelle méthode de cycle de vie permet de capturer une erreur dans une Error Boundary ?

Accepted Answer

componentDidCatch(error, info) est la méthode de cycle de vie invoquée après qu'une erreur a été capturée par l'Error Boundary. Elle reçoit l'erreur et un objet info contenant componentStack, permettant de logger l'erreur ou d'effectuer des actions de side-effect. À noter que getDerivedStateFromError() est aussi utilisée mais pour mettre à jour le state et afficher le fallback UI.

Error Boundaries & Error Handling

Qu'est-ce qu'une Error Boundary en React ?

Réponse

Pourquoi utiliser Error Boundaries plutôt que try/catch classique en React ?

Réponse

Quelle méthode de cycle de vie permet de capturer une erreur dans une Error Boundary ?

Réponse

Quel est le rôle de getDerivedStateFromError() dans une Error Boundary ?

Quelle est la différence entre getDerivedStateFromError() et componentDidCatch() ?

Autres sujets d'entretien React / Next.js

Les bases de JavaScript

Fondamentaux React

React Hooks

Cycle de vie des composants

React Router

Gestion d'état avec Context

Formulaires & Composants contrôlés

Fetching de données & API

React Query (TanStack Query)

Styling & CSS-in-JS

Fondamentaux Next.js

TypeScript avec React

Data Fetching Next.js

Server Actions Next.js

Routing & Navigation Next.js

API Routes Next.js

Metadata & SEO Next.js

Middleware & Auth Next.js

Testing React

Zustand State Management

Optimisation Performance React

Advanced React Patterns

Fonctionnalités avancées Next.js

Déploiement & Production Next.js

Architecture & Design Patterns

React Server Components

Internationalisation Next.js

Sécurité & Best Practices React

Maîtrise React / Next.js pour ton prochain entretien