1. Qu'est-ce que le Virtual DOM et comment fonctionne-t-il ?
Le Virtual DOM est une représentation JavaScript légère du DOM réel. Quand l'état d'un composant change, React cree un nouveau Virtual DOM et le compare avec le précédent via un algorithme de diffing (reconciliation). Seules les différences sont appliquees au DOM réel (patching). Cela evite les manipulations DOM coûteuses. L'algorithme compare par type d'élément (si le type change, l'arbre entier est remplace) et par keys dans les listes (pour identifier quels éléments ont bouge, été ajoutes ou supprimes). Le batching regroupe plusieurs updates d'état en un seul re-render. Le Virtual DOM n'est pas plus rapide que le DOM natif optimise manuellement, mais il offre un modèle de programmation déclaratif plus simple.
2. Expliquez la différence entre les composants fonctionnels et les composants de classe.
Les composants fonctionnels sont des fonctions qui reçoivent des props et retournent du JSX. Depuis les hooks (React 16.8), ils peuvent gérer l'état (useState) et les effets de bord (useEffect). Les composants de classe utilisent la syntaxe class, avec un state objet et des méthodes de cycle de vie (componentDidMount, componentDidUpdate, componentWillUnmount). Les composants fonctionnels sont maintenant le standard : plus concis, pas de problème avec this, les hooks sont composables et réutilisables. Les classes restent nécessaires pour les Error Boundaries (componentDidCatch). Migration : componentDidMount = useEffect(fn, []), componentWillUnmount = useEffect return cleanup, this.state/setState = useState.
3. Comment fonctionne useState et quelles sont ses subtilites ?
useState declare une variable d'état : const [count, setCount] = useState(0). Le setter declenche un re-render. Subtilites : le setter est asynchrone (l'état n'est pas mis à jour immédiatement après l'appel). Pour un update base sur la valeur précédente, utiliser la forme fonctionnelle : setCount(prev => prev + 1) au lieu de setCount(count + 1) (evite les problèmes de stale closure). Les objets et arrays doivent être copies (spread) car React compare par référence. L'initializer function : useState(() => expensiveComputation()) n'est exécutée qu'au premier render. Plusieurs useState sont préférés à un seul objet d'état (séparation des concerns). Ne jamais muter l'état directement.
4. Expliquez useEffect et ses dépendances.
useEffect execute des effets de bord après le render. Trois modes : sans dépendances (useEffect(fn)) execute à chaque render, tableau vide (useEffect(fn, [])) execute une seule fois au montage, avec dépendances (useEffect(fn, [a, b])) execute quand a ou b change. La fonction de nettoyage (return dans useEffect) s'execute avant le prochain effet et au demontage. Utilisation : appels API, subscriptions, timers, manipulation du DOM. Pièges : oublier des dépendances (stale values), mettre un objet en dépendance (nouvelle référence à chaque render, utiliser les valeurs primitives ou useMemo). La règle ESLint exhaustive-deps aide à détecter les dépendances manquantes. Un useEffect ne devrait avoir qu'une seule responsabilité.
5. Comment passer des données entre composants React ?
Props (parent vers enfant) : passage direct via les attributs JSX. Les props sont en lecture seule. Callback props (enfant vers parent) : le parent passe une fonction, l'enfant l'appelle avec les données. Context API (données globales) : createContext + Provider pour fournir, useContext pour consommer. Evite le prop drilling (passer des props à travers plusieurs niveaux). Lifting state up : déplacer l'état vers le plus proche ancetre commun des composants qui en ont besoin. State management : Redux, Zustand, Jotai pour les applications complexes. Règle : commencer simple (props), utiliser Context pour les données vraiment globales (thème, auth), et un state manager seulement si le Context ne suffit plus.
6. Qu'est-ce que le JSX et comment fonctionne-t-il ?
JSX (JavaScript XML) est une extension syntaxique qui ressemble au HTML mais produit des éléments React. JSX est transforme en appels React.createElement() par le compilateur (Babel/SWC). Différences avec le HTML : className au lieu de class, htmlFor au lieu de for, les styles sont des objets JavaScript (style={{ color: 'red' }}), les attributs sont en camelCase (onClick, onChange). Les expressions JavaScript sont inserees entre accolades {}. Le rendu conditionnel utilise : ternaire (condition ? A : B), court-circuit (&& pour afficher si vrai), ou des variables. Les listes utilisent map() avec une key unique et stable. JSX previent les injections XSS en echappant automatiquement les valeurs.
7. Comment gérer les événements en React ?
Les événements React sont des SyntheticEvents : wrappers cross-browser autour des événements natifs. Syntaxe : onClick={handleClick} (pas de parenthèses, on passe la référence). Pour passer des arguments : onClick={() => handleClick(id)} ou via un attribut data. Les événements sont automatiquement delegues à la racine (event délégation). preventDefault() pour empêcher le comportement par défaut (soumission de formulaire). stopPropagation() pour arrêter la propagation. Les formulaires : controlled components (value + onChange, React contrôle la valeur) vs uncontrolled (ref, le DOM contrôle). Controlled est recommandé car l'état React est la source de verite. Le hook useRef accède aux éléments DOM directement quand nécessaire.
8. Expliquez le cycle de vie d'un composant React avec les hooks.
Avec les hooks, le cycle de vie se gere principalement avec useEffect. Montage : le composant est ajoute au DOM, useEffect(fn, []) s'execute après le premier render. Mise à jour : quand les props ou l'état changent, le composant re-render, useEffect(fn, [deps]) s'execute si les dépendances ont change. Demontage : le composant est retire du DOM, la fonction de nettoyage de useEffect s'execute. useLayoutEffect : comme useEffect mais synchrone, s'execute avant que le navigateur ne peigne (pour mesurer le DOM). L'ordre : render -> useLayoutEffect -> peinture -> useEffect. StrictMode en développement double-execute les effets pour détecter les problèmes de nettoyage. Chaque render est un "snapshot" avec ses propres props, state et effets.
9. Qu'est-ce que React Router et comment gérer la navigation ?
React Router (v6+) gere la navigation client-side sans rechargement de page. Composants clés : BrowserRouter (wrapper, utilise l'API History), Routes (conteneur de routes), Route (path + élément), Link/NavLink (navigation sans rechargement), Outlet (rendu des routes enfants imbriquées). Routes imbriquées : Route parent contient des Route enfants, Outlet dans le parent affiche l'enfant correspondant. useNavigate : navigation programmatique (redirection après soumission). useParams : accès aux paramètres dynamiques (/users/:id). useSearchParams : gestion des query parameters. Lazy loading : React.lazy + Suspense pour charger les pages à la demande. Les loaders (v6.4+) chargent les données avant le rendu de la route.
10. Comment structurer un projet React pour la maintenabilité ?
Structure recommandee par fonctionnalité (feature-based) plutôt que par type de fichier. Exemple : src/features/auth/ contient les composants, hooks, services et types lies à l'authentification. Dossiers communs : components/ (composants réutilisables génériques : Button, Modal, Input), hooks/ (hooks partages), lib/ ou utils/ (fonctions utilitaires), pages/ ou routes/ (composants de page), services/ ou api/ (appels API). Conventions : un composant par fichier, nommage PascalCase pour les composants, camelCase pour les hooks et utilitaires. Colocate : tests, styles et types à cote du composant concerne. Index files pour les exports propres. Limiter la profondeur des dossiers à 3-4 niveaux maximum.