60 questions d'entretien React avec des réponses courtes et exactes, et du code : bases, hooks, state, rendu et performances, patterns, Server Components et React 19, et tests. Filtrez par thème et par niveau.
Ces 60 questions d'entretien React couvrent ce que les recruteurs demandent le plus : JSX, props et state, hooks comme useState et useEffect, keys, rendu et memo, context, error boundaries, Server Components et les nouveautés de React 19 comme useActionState. Chacune a une réponse courte en termes simples, souvent avec du code, et vous pouvez filtrer par thème et par niveau.
Répartition des questions
Utilisez les filtres pour travailler un domaine précis, n'ouvrez une réponse qu'après avoir donné la vôtre à voix haute, et lisez les exemples de code comme ce qu'un recruteur pourrait vous demander d'écrire sur le moment.
State et props, les hooks (surtout useEffect et son tableau de dépendances), les keys dans les listes, le re-rendu et la mémoïsation, le context et la récupération de données. Les postes seniors ajoutent le profilage des performances, l'architecture et les Server Components.
De moins en moins. Le nouveau code utilise des composants fonctions et des hooks. Il reste utile de reconnaître les méthodes de cycle de vie en lisant du code ancien, et les error boundaries s'écrivent encore sous forme de classes.
Construisez de petites choses à partir de zéro : une todo list, un champ de recherche avec un fetch en debounce, une modale qui gère le focus. Parlez pendant que vous codez et testez les cas limites comme les listes vides et les erreurs.
De plus en plus, au moins au niveau de leur connaissance : ref comme prop, les actions avec useActionState, useOptimistic, l'API use et les Server Components.
Pas sûr de vous sur les re-rendus ? Regardez-les comptés en direct dans
Une bibliothèque JavaScript pour construire des interfaces à partir de composants. Vous décrivez à quoi l'écran doit ressembler pour les données actuelles, et React met à jour la page quand les données changent.
Une syntaxe qui ressemble à du HTML dans du JavaScript. Une étape de build transforme chaque balise en appel de fonction qui crée un élément React, vous pouvez donc utiliser n'importe quelle expression JavaScript entre accolades.
Une fonction qui reçoit des props et renvoie du JSX. Les noms commencent par une majuscule pour que React puisse les distinguer des balises HTML.
Les entrées qu'un parent transmet à un composant enfant, comme les attributs d'une balise HTML. Un composant ne doit pas modifier ses propres props ; il en reçoit de nouvelles quand le parent effectue un nouveau rendu.
Les props viennent du parent et sont en lecture seule dans le composant. Le state appartient au composant lui-même et change au fil du temps via son setter, ce qui déclenche un nouveau rendu.
Les keys indiquent à React quel élément est lequel d'un rendu à l'autre, pour qu'il garde le bon state et le bon nœud DOM avec chaque élément quand la liste est réordonnée, filtrée ou complétée. Utilisez un id stable issu de vos données, pas l'index du tableau quand l'ordre peut changer.
Avec du JavaScript ordinaire : un if avant le return, l'opérateur ternaire dans le JSX, ou && pour afficher ou rien. Attention à && avec les nombres : 0 && <X /> affiche un 0.
Un conteneur qui regroupe plusieurs éléments sans ajouter de nœud DOM. Écrivez <>...</>, ou <Fragment key={...}> quand le groupe a besoin d'une key dans une liste.
Passez une fonction à une prop en camelCase comme onClick. React transmet un événement synthétique qui se comporte comme l'événement du navigateur. Passez la fonction elle-même, pas le résultat de son appel.
La description de l'interface sous forme d'objets simples que React construit à chaque rendu. React compare la nouvelle description à la précédente et n'applique que les différences au vrai DOM. Cette comparaison s'appelle la réconciliation.
Il donne à un composant un élément de state et une fonction pour le mettre à jour. Appeler le setter planifie un nouveau rendu avec la nouvelle valeur ; la variable du rendu en cours ne change pas.
Quand la valeur suivante dépend de la précédente, surtout avec plusieurs mises à jour dans un même événement. Chaque updater reçoit la dernière valeur en file d'attente, alors que setCount(count + 1) appelé deux fois utilise deux fois le même count périmé.
À se synchroniser avec quelque chose d'extérieur à React après le rendu : un abonnement, un timer, un widget non React ou une requête réseau. Le tableau de dépendances indique quand le relancer, et la fonction renvoyée fait le nettoyage.
Pour calculer des valeurs à partir des props ou du state (calculez-les plutôt pendant le rendu), ou pour réagir à une action de l'utilisateur (faites le travail dans le gestionnaire d'événement). Les effets servent à se synchroniser avec des systèmes externes.
N'appelez les hooks qu'au niveau supérieur d'un composant ou d'un hook personnalisé, jamais dans des boucles, des conditions ou des fonctions imbriquées, et uniquement depuis des fonctions React. React compte sur un ordre d'appel identique à chaque rendu.
À conserver une valeur qui survit aux rendus sans en provoquer un quand elle change, comme un nœud DOM, un id de timer ou une valeur précédente. On la lit et l'écrit via ref.current.
useMemo met en cache le résultat d'un calcul ; useCallback met en cache une fonction. Les deux renvoient la même chose tant qu'une dépendance ne change pas, et les deux comptent surtout quand on passe des valeurs à des enfants mémoïsés.
Un moyen de lire une valeur fournie plus haut dans l'arbre sans passer de props à chaque niveau. Chaque composant qui lit un context effectue un nouveau rendu quand sa valeur change.
Quand plusieurs valeurs changent ensemble ou que le prochain state dépend d'un type d'action, comme un formulaire en plusieurs étapes ou un panier. Le reducer garde toutes les transitions dans une seule fonction testable.
Une fonction dont le nom commence par use et qui appelle d'autres hooks. Il partage de la logique avec état entre composants ; chaque composant qui l'appelle obtient son propre state.
Il s'exécute après que React a modifié le DOM mais avant que le navigateur ne peigne l'écran, ce qui permet de mesurer la mise en page et d'ajuster sans scintillement visible. Il bloque l'affichage, ne l'utilisez donc que pour cela.
À générer un id unique identique entre le rendu serveur et le rendu client, pour relier libellés, champs et descriptions. Il n'est pas prévu pour les keys de liste.
Déplacer un state partagé vers le parent commun le plus proche des composants qui en ont besoin, puis le transmettre en props avec les fonctions pour le modifier.
React décide s'il faut refaire un rendu en comparant l'ancienne et la nouvelle valeur. Modifier un objet ou un tableau sur place garde la même référence, donc React peut ignorer la mise à jour. Créez plutôt une nouvelle copie.
Un champ contrôlé tire sa valeur du state et signale les changements via onChange. Un champ non contrôlé garde sa propre valeur dans le DOM, que vous lisez avec une ref ou à la soumission du formulaire.
Une valeur que l'on peut calculer à partir des props ou du state existants, comme une liste filtrée. La stocker à part oblige à garder deux copies synchronisées ; la calculer pendant le rendu ne peut pas diverger.
Faire passer des props à travers des composants qui ne les utilisent pas, juste pour atteindre un enfant profond. Les solutions : la composition (passer des children), le context, ou une bibliothèque de state pour les données vraiment globales.
Quand de nombreux composants éloignés lisent et modifient le même state client et que le context provoque trop de re-rendus, ou quand vous avez besoin d'outils comme les devtools et les middlewares. Les données serveur sont généralement mieux gérées par une bibliothèque de récupération de données qui les met en cache.
Dans un framework avec Server Components, récupérez-les côté serveur. Côté client, utilisez une bibliothèque de données ou un effet qui lance la requête, gère le chargement et les erreurs, et ignore le résultat si le composant a été démonté ou si l'entrée a changé.
Non. Les mises à jour sont mises en file d'attente et regroupées ; depuis React 18, les mises à jour issues de timeouts et de promesses sont aussi regroupées, pas seulement celles des gestionnaires d'événements. La nouvelle valeur apparaît au rendu suivant.
Son state change, son parent refait un rendu, ou un context qu'il lit change. Un re-rendu ne modifie pas toujours le DOM ; React ne met à jour que ce qui diffère.
Il évite de refaire le rendu d'un composant quand ses props sont superficiellement égales à la fois précédente. Il n'est rentable que si le composant est rendu souvent avec les mêmes props et que son rendu n'est pas bon marché.
Un conteneur réservé au développement qui ajoute des vérifications : il rend les composants et exécute les effets deux fois pour révéler les effets de bord et les cleanups manquants. Il ne fait rien en production.
Enregistrez l'interaction dans le Profiler des React DevTools sur un build de production, cherchez les composants rendus souvent ou longs à rendre, puis corrigez la cause : descendre le state, mémoïser, ou virtualiser les longues listes.
Un moyen de marquer une mise à jour comme non urgente. React garde le champ réactif et peut interrompre le rendu lent, et isPending vous permet d'indiquer qu'un travail est en cours.
Il vous donne une copie d'une valeur qui peut prendre du retard pendant un rendu lourd. La saisie met le champ à jour immédiatement pendant que la liste coûteuse se rend avec la valeur différée.
Virtualisez-la : n'affichez que les lignes visibles avec une bibliothèque comme react-window ou TanStack Virtual. La pagination ou le chargement au défilement limitent aussi le nombre de nœuds DOM.
Charger des parties de l'application seulement quand elles sont nécessaires. React.lazy avec un import dynamique et un fallback Suspense place un composant dans son propre fichier.
Attacher React à du HTML rendu côté serveur, pour que le balisage existant devienne interactif sans être reconstruit. Si le client rend quelque chose de différent, React signale une erreur d'hydratation (hydration mismatch).
Un outil de build qui analyse les composants et ajoute la mémoïsation automatiquement, rendant inutiles une grande partie des useMemo, useCallback et memo écrits à la main. Il attend du code qui respecte les règles de React.
Construire des composants en plaçant d'autres composants à l'intérieur, souvent via children ou d'autres props. Les composants React partagent leur comportement par composition et par les hooks, et l'équipe React n'a trouvé aucun cas où des hiérarchies d'héritage seraient utiles.
Tout ce que vous placez entre les balises ouvrante et fermante d'un composant. Elle permet à un composant de mise en page ou à un conteneur d'afficher un contenu qu'il ne connaît pas.
Une fonction qui prend un composant et en renvoie un nouveau avec un comportement supplémentaire. Les hooks personnalisés l'ont remplacé dans la plupart des cas, car ils partagent la logique sans encapsuler ni renommer les props.
Un composant qui intercepte les erreurs levées pendant le rendu de ses enfants et affiche un fallback au lieu d'une page blanche. Elle s'écrit encore sous forme de classe avec getDerivedStateFromError, ou avec une petite bibliothèque.
Le rendu d'enfants dans un autre nœud DOM, comme document.body, avec createPortal. On l'utilise pour les modales et les infobulles qui doivent échapper à l'overflow ou à l'empilement d'un parent.
Dans React 19, les composants fonctions acceptent ref comme une prop normale. Dans les versions précédentes, entourez l'enfant de forwardRef. Utilisez useImperativeHandle pour n'exposer que certaines méthodes.
Un groupe de composants qui fonctionnent ensemble et partagent un state via le context, comme Tabs avec Tabs.List et Tabs.Panel. L'utilisateur agence les parties pendant que le parent gère la logique.
Des composants qui s'exécutent uniquement sur le serveur et envoient au navigateur leur résultat rendu, pas leur code. Ils peuvent lire les données directement ; les parties interactives vont dans des Client Components marqués avec "use client".
Il marque un fichier comme le début du code client : ce module et ce qu'il importe sont inclus dans le bundle du navigateur et peuvent utiliser du state, des effets et des gestionnaires d'événements.
Des fonctions async qui s'exécutent sur le serveur mais peuvent être appelées depuis le client, le plus souvent comme action de formulaire. Traitez chacune comme un endpoint public : validez les entrées et vérifiez les permissions.
Il encapsule une fonction d'action et renvoie son dernier résultat, une action encapsulée à passer à un formulaire, et un indicateur d'attente. C'est la façon React 19 d'afficher un retour de formulaire.
Une API de React 19 qui lit la valeur d'une promesse ou d'un context pendant le rendu. Contrairement aux hooks, elle peut être appelée dans des conditions ; avec une promesse, elle suspend jusqu'à ce que la valeur soit prête.
Il affiche tout de suite le résultat attendu d'une action, comme un nouveau commentaire, pendant que la requête est encore en cours, puis se cale sur le vrai résultat à son retour.
Un composant qui affiche un fallback tant que quelque chose à l'intérieur n'est pas prêt, comme du code chargé à la demande ou des données dans un framework qui le prend en charge. Avec le rendu serveur, il permet à des parties de la page d'arriver plus tard en streaming.
Rendez-le avec React Testing Library dans un lanceur de tests comme Vitest ou Jest, interagissez comme le ferait un utilisateur (cliquer, taper), et vérifiez ce qui est visible, pas le state interne.
Des requêtes comme getByRole("button", { name: "Save" }) trouvent les éléments comme le font les technologies d'assistance, donc les tests vérifient aussi l'accessibilité de l'interface et résistent aux changements de balisage.
La documentation React recommande de partir d'un framework comme Next.js ou React Router pour les applications complètes. Pour une application uniquement côté client, Vite est un outil de build courant.
Utilisez des éléments HTML sémantiques, donnez un libellé à chaque champ, gérez le focus dans les boîtes de dialogue, gardez l'accès au clavier pour tout ce qui est cliquable, et testez avec un lecteur d'écran et un vérificateur automatique.
Servez du vrai HTML pour chaque URL via le rendu serveur, la génération statique ou le prérendu, donnez à chaque route son propre titre et sa propre meta description, et listez les URL dans un sitemap.
Des keys correctes dans les listes, des effets avec des dépendances complètes et un cleanup, pas de state qui pourrait être dérivé, un balisage accessible, des états d'erreur et de chargement, et aucun secret dans le code client.
Toutes
Junior
Intermédiaire
Senior
Thème
Niveau
Rechercher
effect, key, memo...
{shown} sur {total} questions
Commencer gratuitement · Sans carte bancaire