Vous trouverez ci-dessous un ensemble de réponses détaillées et approfondies aux questions d'entretien Frontend en 2026, compilées sur la base des dernières normes techniques de React 19 et Next.js 16.
I. JavaScript et TypeScript Core
1. Boucle d'événements et priorisation des tâches : la file d'attente Microtask (Promesses, async/await, MutationObserver) a une priorité plus élevée que la file d'attente Macrotask (setTimeout, I/O, événements). Les microtâches sont exécutées immédiatement après le code synchrone et doivent être complètement libérées avant que le navigateur n'effectue la prochaine étape de repeinture. La « famine » se produit lorsqu'un thread Microtask récursif ajoute continuellement de nouvelles tâches à la file d'attente, provoquant le blocage indéfini des macrotâches et du rendu, entraînant un crash complet de l'application.
2. Gestion de la mémoire (Mark-and-Sweep & WeakMap) : Le mécanisme "Mark-and-Sweep" démarre à partir des objets racine, marque tous les objets accessibles comme "vivants" et récupère la mémoire des objets non marqués. WeakMap et WeakSet contiennent des références faibles à l'objet, ce qui signifie qu'ils n'empêchent pas le Garbage Collector de récupérer de la mémoire si l'objet n'a pas d'autres références fortes. Il s'agit d'un outil puissant pour stocker les métadonnées des nœuds ou des caches DOM sans se soucier des fuites de mémoire.
3. Mécanismes de copie d'objet :
copie superficielle : copie uniquement les propriétés de premier niveau, les objets imbriqués partagent toujours la même référence.
copie approfondie : copie entièrement la structure de l'objet.
Comparaison :
structuredClone()est l'API Web native la plus rapide, prenant en chargeMap,Setet les références circulaires, mais ne peut pas copier de fonctions ou de nœuds DOM.JSON.parse(JSON.stringify())est très lent et perd des données spéciales (Date, RegExp).lodash.cloneDeepgère tous les cas mais augmente la taille du bundle d'environ 17 Ko.
4. Logique de référence et algorithmes de copie : Lors de l'attribution de b = a, les deux variables pointent vers le même emplacement mémoire ; Changer l'attribut de b changera directement a. Pour copier des objets imbriqués, des bibliothèques comme Lodash utilisent un algorithme récursif combiné à une carte pour garder une trace des objets traités, aidant ainsi à éviter les boucles infinies lors de la rencontre de références circulaires et à préserver les types de données complexes.
5. Promise.all vs Sequential Await : Utilisez Promise.all lorsque les tâches ne dépendent pas les unes des autres pour s'exécuter en parallèle, réduisant ainsi le temps d'attente total au temps de la tâche la plus longue. Promise.allSettled offre la stabilité car il attend que toutes les promesses se terminent (indépendamment du succès ou de l'échec) et renvoie un tableau de résultats détaillé, évitant ainsi qu'une tâche échouée ne fasse planter toute la chaîne comme Promise.all.
6. Performances conditionnelles (Switch vs If-Else) : switch est souvent plus rapide que if-else lorsqu'il y a plusieurs conditions car le compilateur (comme V8) peut créer une "table de saut" qui permet un accès direct au bloc d'instructions à exécuter (O(1)) au lieu de vérifier chaque branche séquentiellement (O(n)).
7. TypeScript Evolution (Unions vs Enum) : En 2026, les "String Literal Unions" ('A' | 'B') combinées comme const sont préférées car elles disparaissent complètement après la compilation (taille de bundle nulle), tandis que Enum génère du code JavaScript redondant. De plus, les énumérations numériques manquent de sécurité de type car elles permettent d'attribuer n'importe quelle valeur numérique.
8. Typage avancé (inférer et satisfaire) : infer permet d'extraire des types de données d'une structure complexe dans des types conditionnels (par exemple, obtenir le type de retour d'une fonction). L'opérateur satisfait permet de vérifier si un objet correspond à une interface tout en préservant son type de données littéral, aidant IntelliSense à fonctionner avec plus de précision que le casting avec as.
II. React 19 Core et crochets
9. useMemo se souvient d'une fonction : Oui, useMemo peut se souvenir complètement d'une définition de fonction si cette fonction est la valeur de retour d'un bloc logique de calcul interne. Cependant, useCallback est une syntaxe abrégée spécialisée à cet effet.
10. Cas d'utilisation de useCallback : En plus de l'optimisation du nouveau rendu, useCallback est important pour garantir la stabilité référentielle lors du passage de fonctions en tant que dépendances à d'autres hooks (useEffect, useMemo) ou pour empêcher le nouveau rendu des composants enfants enveloppés dans React.memo.
11. Stockage de hook interne : React stocke les valeurs de hook sous forme de liste liée attachée à la propriété memoizedState de chaque nœud Fibre. L'ordre d'appel du Hook est « sacré » car React s'appuie sur l'ordre d'exécution pour mapper correctement l'ancien état au Hook correspondant ; Si vous appelez Hook dans la condition, cette liste sera indexée.
12. useMemo vs useEffect (Même logique, résultats différents) :
useMemo: Exécuté de manière synchrone pendant le processus de rendu. S'il y a une logique impure (effet secondaire) à l'intérieur, elle peut ralentir ou geler le rendu de l'interface utilisateur.useEffect: s'exécute de manière asynchrone après la peinture de l'interface.Par exemple : Si la logique consiste à mettre à jour une variable globale,
useMemomodifiera cette variable immédiatement lors du rendu, tandis queuseEffectattendra que l'utilisateur le voit. La nouvelle interface a changé, entraînant des divergences dans le timing d'affichage des données.
13. DOM Sync (useEffect vs useLayoutEffect) : useLayoutEffect s'exécute de manière synchrone juste après les modifications du DOM mais avant que le navigateur ne soit peint. Il est utilisé pour mesurer la taille des éléments et mettre à jour l'interface utilisateur immédiatement pour éviter le scintillement, tandis que useEffect (exécuté après la peinture) permettra à l'utilisateur de voir l'ancienne interface utilisateur pendant quelques millisecondes.
14. Cycle de vie des composants fonctionnels : se compose de 3 phases : monter (ajouter au DOM), mettre à jour (rendu) et démonter (supprimer). useEffect s'exécute après le rendu ; La fonction de nettoyage s'exécute juste avant le démontage du composant ou avant que l'effet ne s'exécute à nouveau lors du prochain rendu pour nettoyer les anciennes ressources.
15. Règles des Hooks : N'appelez pas les Hooks dans des boucles ou des conditions car React gère l'état en fonction de l'ordre d'appel dans la liste chaînée de Fiber. Si l'ordre change, React ne peut pas déterminer quel état appartient à quel hook.
16. useRef Mechanics (React 19) : useRef renvoie un objet persistant {current:...} qui persiste tout au long du cycle de vie du composant sans déclencher un nouveau rendu lorsque la valeur change. React 19 permet de transmettre ref comme accessoire régulier au composant enfant, éliminant ainsi le besoin d'utiliser forwardRef.
17. Optimisation de l'API de contexte : diviser le contexte (Context Splitting) pour isoler les états qui changent fréquemment, ou envelopper le composant enfant dans useMemo/React.memo pour éviter un nouveau rendu lorsque la valeur de contexte du parent change mais que le composant enfant ne l'utilise pas.
18. Nouveaux hooks React 19 :
-
if/else).
19. Règles du compilateur React : Le compilateur automatise la mémorisation au niveau de la construction. Les programmeurs doivent adhérer à la pureté (idempotence) et à l'immuabilité (immuabilité) des accessoires/états ; En cas de violation, le compilateur "ignorera" l'optimisation de ce composant.
III. Next.js 16+ et stratégies de rendu
20. Mécanisme d'hydratation : Le serveur envoie du HTML statique avec les données d'initialisation dans la balise