Développeur React en entretien sur les effets, le rendu et l'état serveur

Préparer des questions d'entretien pour un développeur React demande de savoir quelle version et quel cadre tournent chez vous. Une application montée avec Vite et React Router ne pose pas les mêmes questions qu'un projet Next.js avec des Server Components. Les offres associent souvent React à TypeScript et à un back Java, .NET ou Node.js. React 19 est sorti en décembre 2024 et la version 19.3 en septembre 2026. Create React App est déprécié depuis février 2025 : un projet qui l'utilise encore a une migration devant lui.

Les CV citent tous les hooks, Redux et la performance. Le niveau réel se voit sur useEffect. Un junior y met tout, calculs compris, et lance des appels API sans annulation. Un profil confirmé sait qu'un effet sert à se synchroniser avec un système extérieur, sépare l'état serveur de l'état d'interface et connaît le coût d'un contexte qui change à chaque frappe. Avec le React Compiler, la mémoïsation manuelle compte moins, mais il faut toujours comprendre pourquoi un composant se rend.

Faites lire un composant existant plutôt que d'écrire une todo-list de zéro. Quatre-vingts lignes avec un effet mal écrit et une liste sans key stable montrent vite les réflexes. Le PDF contient un cas de 20 minutes sur une page de recherche avec filtres.

Ce que l'on trouve dans une application React aujourd'hui

React 19 et les hooks

useState, useEffect, useRef, useMemo et useContext couvrent le quotidien. React 19 ajoute useActionState, useOptimistic et l'API use, et permet de passer ref comme une prop. Les règles des hooks restent la base : un candidat qui les explique mal aura du mal sur le reste.

React Compiler

Un outil de build, en version 1.0 depuis octobre 2025, qui mémoïse automatiquement les composants et les valeurs. Il réduit le besoin de useMemo, useCallback et memo écrits à la main. Il suppose un code qui respecte les règles de React, ce qui le rend aussi utile pour repérer le code fragile.

Next.js, React Router et Vite

React seul ne gère ni le routage ni le rendu serveur. Une application monopage se construit souvent avec Vite et React Router. Les Server Components et les fonctions serveur s'utilisent à travers un framework, Next.js avec l'App Router ou React Router en mode framework. Demandez lequel la personne a utilisé en production.

TypeScript

Demandé dans beaucoup d'offres React. Typage des props, des réponses d'API, des génériques pour les composants réutilisables. Un profil à l'aise type sans any et sait déduire les types d'un schéma de validation.

Redux Toolkit et Zustand

Deux façons de gérer un état client partagé entre plusieurs écrans. Redux Toolkit est la forme actuelle de Redux, avec Immer et RTK Query. Zustand est plus léger. Beaucoup d'équipes en ont moins besoin depuis qu'un cache dédié gère les données de l'API.

TanStack Query

Une bibliothèque très utilisée pour l'état serveur : chargement, cache, revalidation, invalidation après une modification, nouvelles tentatives. Elle remplace des centaines de lignes de useEffect et de isLoading. Les questions sur les clés de requête et l'invalidation montrent vite si la personne l'a vraiment utilisée.

React Hook Form et Zod

React Hook Form gère les formulaires avec peu de rendus, Zod décrit le schéma de validation et donne les types TypeScript. Le couple revient souvent dans les applications de gestion avec beaucoup de saisie.

Vitest, React Testing Library, Playwright

Vitest ou Jest exécutent les tests, React Testing Library teste les composants comme un utilisateur les voit, MSW simule l'API. Playwright ou Cypress couvrent les parcours de bout en bout. Une personne qui ne parle que de snapshots a peu testé.

ESLint et Storybook

ESLint avec le plugin react-hooks vérifie les règles des hooks et les dépendances d'effet. Storybook documente les composants d'interface partagés, surtout quand il existe un design system.

Le même intitulé couvre des postes très différents. Certains développeurs React intègrent surtout des écrans à partir de maquettes Figma. D'autres conçoivent l'architecture front d'une application de gestion avec des dizaines de formulaires, ou travaillent sur un site rendu côté serveur avec Next.js où le référencement compte. Beaucoup d'offres sont en réalité full stack, avec Node.js, Java ou .NET derrière. React Native est un métier voisin : même modèle de composants, mais contraintes mobiles et outils différents. Précisez dans l'offre la part de chaque activité, puis adaptez les axes de l'entretien.

Les compétences React à contrôler en entretien

• Hooks et effets
• Rendu, re-rendu et performance
• État local, global et état serveur
• Formulaires et validation
• Tests de composants
• React 19 : Server Components et actions

Les cinq questions React à poser en premier

Chaque question vient avec ce qu'une bonne réponse contient et le signal qui doit vous alerter. Pas besoin d'être technique pour les poser : écoutez si le candidat raconte du vécu.

1. Question 1 · confirmé

   Un composant affiche les résultats d'une recherche. Quand l'utilisateur tape vite, les résultats d'une ancienne saisie remplacent parfois les bons. Que se passe-t-il ?

   Une bonne réponseUne course entre requêtes : la réponse d'une ancienne saisie arrive après celle de la plus récente et écrase l'état. L'effet doit se nettoyer, avec un AbortController annulé dans la fonction de nettoyage ou un drapeau qui ignore la réponse périmée. Avec TanStack Query, la saisie fait partie de la clé de requête et la bibliothèque gère le cas. Un debounce limite en plus le nombre d'appels.

   Signal d'alerteUn setTimeout pour « laisser le temps », retirer la saisie du tableau de dépendances, ou un effet sans fonction de nettoyage.

2. Question 2 · junior à confirmé

   Dans quels cas n'avez-vous pas besoin d'un useEffect ?

   Une bonne réponsePour calculer une valeur dérivée des props ou de l'état : on la calcule pendant le rendu, avec useMemo si le calcul est coûteux. Pour réagir à un clic : le code va dans le gestionnaire d'événement. Pour remettre à zéro l'état quand une prop change : on change la key du composant. Un effet sert à se synchroniser avec un système extérieur à React, comme un abonnement, une API du navigateur ou un widget tiers. La documentation de react.dev y consacre une page entière.

   Signal d'alerteUn useEffect qui recopie une prop dans un état, ou une chaîne d'effets qui se déclenchent les uns les autres.

3. Question 3 · confirmé

   Une liste de 2 000 lignes rame dès qu'on tape dans le champ de filtre au-dessus. Comment trouvez-vous la cause, et que faites-vous ?

   Une bonne réponseIl ouvre le Profiler des React DevTools pour voir quels composants se rendent et combien de temps ils prennent. Souvent, l'état du champ est trop haut et toute la liste se rend à chaque frappe. Pistes : rapprocher l'état du champ, mémoïser les lignes (memo ou React Compiler), des keys stables, useDeferredValue ou startTransition pour garder la saisie fluide. À 2 000 lignes, la virtualisation (TanStack Virtual, react-window) n'affiche que les lignes visibles.

   Signal d'alerteuseMemo ajouté partout sans mesure, key={index} sur une liste filtrée, ou « React est lent ».

4. Question 4 · confirmé

   Vous chargez la liste des clients depuis l'API. Vous la rangez dans Redux, dans un contexte ou ailleurs ?

   Une bonne réponseC'est de l'état serveur, donc un cache dédié comme TanStack Query ou RTK Query : chargement, erreur, mise en cache, revalidation et invalidation après une modification sont déjà gérés. Redux Toolkit ou Zustand servent à l'état client partagé (panier, préférences, brouillon), useState à l'état local. Le contexte convient aux valeurs qui changent peu, comme le thème ou l'utilisateur connecté, car chaque changement fait se rendre tous ses consommateurs.

   Signal d'alerteTout dans Redux avec un isLoading écrit à la main dans chaque slice, ou un contexte géant qui change à chaque frappe.

5. Question 5 · junior

   Pourquoi utiliser l'index du tableau comme key pose-t-il problème ?

   Une bonne réponseLa key identifie un élément d'un rendu à l'autre. Si la liste est triée, filtrée ou reçoit un élément en tête, l'index change et React réutilise le mauvais composant : le texte saisi ou la case cochée se retrouve sur une autre ligne, et des rendus inutiles s'ajoutent. On prend un identifiant stable issu des données. L'index reste acceptable pour une liste statique jamais réordonnée.

   Signal d'alerte« C'est juste pour faire disparaître l'avertissement », ou une key générée par Math.random à chaque rendu.

Questions fréquentes sur le recrutement d'un développeur React

Pour structurer vos autres entretiens, consultez aussi nos pages sur les questions d'entretien de recrutement, la méthode de l'entretien structuré et la grille d'évaluation d'entretien.