Question 1

Quelle est la principale différence entre let et var ?

Accepted Answer

let déclare une variable à portée de bloc, ce qui signifie qu'elle n'existe que dans le bloc où elle est définie (entre accolades). var a une portée de fonction, ce qui peut causer des bugs inattendus car la variable est accessible dans toute la fonction. Utiliser let par défaut évite les problèmes de hoisting et de fuites de variables dans les boucles ou les conditions.

Question 2

Qu'est-ce que JSX dans React ?

Accepted Answer

JSX est une extension de syntaxe JavaScript qui permet d'écrire du markup ressemblant à du HTML directement dans le code JavaScript. Il est transformé en appels de fonction React.createElement par Babel lors de la compilation. Utiliser JSX rend le code plus lisible et permet de détecter des erreurs au moment de la compilation grâce au typage, tout en combinant la puissance de JavaScript avec une syntaxe familière.

Question 3

Qu'est-ce que le hook useState dans React ?

Accepted Answer

useState est un hook React qui permet de gérer l'état local d'un composant fonctionnel. Contrairement aux variables JavaScript classiques qui sont réinitialisées à chaque rendu, useState préserve la valeur de l'état entre les rendus successifs. Ce hook retourne un tableau contenant la valeur actuelle de l'état et une fonction pour le mettre à jour, déclenchant automatiquement un nouveau rendu du composant lorsque l'état change.

Question 4

Qu'est-ce que le mounting d'un composant React ?

Accepted Answer

Le mounting est la phase où un composant est créé et inséré dans le DOM pour la première fois. Durant cette phase, React initialise le state, exécute le code de construction et effectue le premier rendu. C'est le moment idéal pour déclencher des appels API ou initialiser des abonnements via useEffect.

Question 5

Qu'est-ce qu'un CSS Module dans React ?

Accepted Answer

CSS Modules génèrent automatiquement des noms de classes uniques en ajoutant un hash au nom de classe, ce qui évite les conflits de styles entre composants. Chaque fichier CSS Module a son propre scope local, contrairement aux feuilles de style globales classiques. Cette approche permet d'écrire des styles modulaires sans risque de surcharge accidentelle dans d'autres composants de l'application.

Question 6

Qu'est-ce que l'App Router dans Next.js ?

Accepted Answer

L'App Router est le nouveau système de routing de Next.js 13+ basé sur le dossier app/. Il remplace le Pages Router et introduit les Server Components par défaut, les layouts partagés, et un modèle de routing plus flexible avec des conventions de fichiers comme page.tsx, layout.tsx et loading.tsx.

Question 7

Quelle est la syntaxe correcte pour typer les props d'un composant React ?

Accepted Answer

L'interface Props suivie du typage de la fonction avec Props en paramètre est la syntaxe standard recommandée. Cette approche offre une excellente inférence de type et permet de réutiliser facilement le type Props ailleurs dans le code. Elle est plus explicite que React.FC et permet de mieux contrôler le typage des children.

Question 8

Quel est le rôle principal de React.memo ?

Accepted Answer

React.memo est un Higher-Order Component qui mémorise le résultat du rendu d'un composant. Il effectue une comparaison superficielle des props et évite un re-rendu si les props n'ont pas changé. Particulièrement utile pour optimiser les composants enfants coûteux qui reçoivent les mêmes props fréquemment.

Question 9

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 10

Qu'est-ce que le pattern Compound Components ?

Accepted Answer

Le pattern Compound Components permet de créer des composants qui partagent un état implicite via React Context, sans passer de props explicitement. Ce pattern est utilisé dans des bibliothèques comme Radix UI et Headless UI pour offrir une API flexible et composable. Les composants enfants peuvent accéder à l'état partagé automatiquement, permettant une personnalisation de la structure sans perdre la logique commune.

Questions d'entretien React / Next.js

Prêt pour ton entretien React / Next.js ?

Explorer tous les sujets 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

Error Boundaries & Error Handling

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