Entretien React Junior : Hooks, Context et Router

Q: Qu'est-ce que le hook useCallback et quand l'utiliser ?

Bonne réponse : Mémoriser une fonction pour éviter de la recréer à chaque rendu. useCallback retourne une version mémorisée de la fonction qui ne change que si ses dépendances changent. Utile pour éviter des rendus inutiles des composants enfants qui reçoivent cette fonction en prop (avec React.memo).

Q: Comment créer un contexte global (state management) en React ?

Bonne réponse : Avec createContext et useContext. L'API Context de React (createContext, Provider, useContext) permet de partager des données globalement sans passer manuellement les props à chaque niveau (évite le prop drilling).

Q: Quelle est la différence entre useMemo et useCallback ?

Bonne réponse : useMemo mémorise une valeur ; useCallback mémorise une fonction. useMemo mémorise le résultat d'une fonction (une valeur). useCallback mémorise la fonction elle-même. useCallback(fn, deps) équivaut à useMemo(() => fn, deps).

Q: À quoi sert React.memo ?

Bonne réponse : Éviter le re-rendu d'un composant si ses props n'ont pas changé. React.memo est un HOC (Higher-Order Component) qui enveloppe un composant et ne le re-rend que si ses props ont changé. Il effectue une comparaison superficielle (shallow) des props.

Q: Comment fonctionne le hook useReducer et quand l'utiliser ?

Bonne réponse : Pour gérer des états complexes avec une logique de transition d'état explicite. useReducer(reducer, initialState) est utile quand la logique d'état est complexe (multiples sous-valeurs) ou dépend de l'état précédent. Le reducer est une fonction (state, action) => newState.

Q: Qu'est-ce que le hook useRef et quels sont ses cas d'usage ?

Bonne réponse : Accéder au DOM et persister des valeurs entre les rendus sans déclencher de re-rendu. useRef retourne un objet mutable { current: valeur } qui persiste pendant toute la durée de vie du composant. Cas d'usage : accès au DOM (ref={inputRef}), stockage de timers/IDs, mémorisation de la valeur précédente.

Q: Expliquez le pattern "Render Props" en React.

Bonne réponse : Passer des enfants à un composant via une prop qui est une fonction. Le pattern Render Props consiste à passer une fonction en prop à un composant, qui appelle cette fonction pour savoir quoi afficher. Cela permet de partager du code entre composants. <Composant render={(data) => <Affichage data={data} />} />.

Q: Quelle est la différence entre le state local et le state global en React ?

Bonne réponse : Le state local est géré dans un composant ; le global est partagé entre plusieurs composants. Le state local est interne à un composant (useState, useReducer). Le state global est accessible par plusieurs composants, souvent via Context API, Redux, Zustand, etc. Le choix dépend de la portée des données.

Q: Comment optimiser les performances d'une liste React avec beaucoup d'éléments ?

Bonne réponse : Utiliser la virtualisation (react-window, react-virtuoso). La virtualisation ne rend que les éléments visibles dans le viewport, ce qui réduit considérablement le nombre de nœuds DOM. Des bibliothèques comme react-window ou react-virtuoso implémentent cette technique.

Q: Comment gérer proprement une requête asynchrone avec nettoyage dans useEffect ?

Bonne réponse : Utiliser un flag isCancelled ou un AbortController dans la fonction de cleanup. Pour éviter les fuites mémoire ou les mises à jour sur un composant démonté, on utilise soit une variable booléenne let cancelled = false que l'on vérifie avant setState, soit AbortController pour annuler la requête HTTP.

React Junior Quiz-React-Junior React-Hooks Usestate Useeffect Usecontext Useref Custom-Hooks Context-Api React-Router Questions-Entretien-React-Junior Qcm-React-Junior Front-End

Junior 🔀 Mixte 20 questions ⏱ 15 min

📝

Entretien React Junior : Hooks, Context et Router

20 questions React niveau junior : useState, useEffect, useContext, useRef, custom hooks, Context API et React Router. Pour réussir un entretien React junior.

20 questions ⏱ ~15 min Niveau Junior

Publié/Développé par Mezgani Said

Développeur web full‑stack et formateur spécialisé en Angular, TypeScript et Node.js, il partage sur AngularForAll des ressources complètes pour les développeurs : tutoriels pratiques, guides pas‑à‑pas, outils gratuits, exercices, QCM techniques et retours d’expérience issus de projets réels (SaaS, micro‑frontends, architectures modulaires, applications d’entreprise).
Le site couvre l’ensemble de l’écosystème web : front‑end, intégration HTML/CSS, Composants réutilisables, SEO, back‑end, cloud, IA, CLI, productivité, bien‑être, outils web et métiers du digital.
Un espace pensé pour générer, apprendre, progresser et développer des projets modernes avec des bonnes pratiques professionnelles.

Banque de révision : les 20 questions corrigées

Voici l'intégralité des 20 questions de « Entretien React Junior : Hooks, Context et Router », chacune avec sa bonne réponse et son explication. Le quiz interactif ci-dessus en tire une sélection aléatoire à chaque tentative — utilisez cette liste complète pour réviser.

Mémoriser une valeur calculée pour éviter des recalculs
Mémoriser une fonction pour éviter de la recréer à chaque rendu (bonne réponse)
Appeler une API de manière asynchrone
Créer un callback après le rendu

Explication : useCallback retourne une version mémorisée de la fonction qui ne change que si ses dépendances changent. Utile pour éviter des rendus inutiles des composants enfants qui reçoivent cette fonction en prop (avec React.memo).

À utiliser avec parcimonie : réservez useCallback pour les fonctions passées à des composants enfants optimisés avec React.memo.

Avec Redux uniquement
Avec createContext et useContext (bonne réponse)
Avec les props en cascade (prop drilling)
Avec localStorage

Explication : L'API Context de React (createContext, Provider, useContext) permet de partager des données globalement sans passer manuellement les props à chaque niveau (évite le prop drilling).

Pour des mises à jour fréquentes, Context peut causer des re-rendus non souhaités. Combinez-le avec useReducer ou utilisez une solution comme Zustand pour de meilleures performances.

useMemo mémorise une valeur ; useCallback mémorise une fonction (bonne réponse)
useMemo est pour les fonctions ; useCallback pour les objets
Il n'y a pas de différence
useMemo est asynchrone ; useCallback synchrone

Explication : useMemo mémorise le résultat d'une fonction (une valeur). useCallback mémorise la fonction elle-même. useCallback(fn, deps) équivaut à useMemo(() => fn, deps).

Pensez "Memo = Memory value" et "Callback = Callback function".

Mémoriser une valeur dans un composant
Éviter le re-rendu d'un composant si ses props n'ont pas changé (bonne réponse)
Optimiser les appels API
Créer un composant asynchrone

Explication : React.memo est un HOC (Higher-Order Component) qui enveloppe un composant et ne le re-rend que si ses props ont changé. Il effectue une comparaison superficielle (shallow) des props.

Pour les props complexes (objets, tableaux), passez une fonction de comparaison personnalisée en 2e argument de React.memo.

Pour gérer des états complexes avec une logique de transition d'état explicite (bonne réponse)
Pour réduire le nombre de rendus
Pour remplacer tous les useState
Pour faire du lazy loading

Explication : useReducer(reducer, initialState) est utile quand la logique d'état est complexe (multiples sous-valeurs) ou dépend de l'état précédent. Le reducer est une fonction (state, action) => newState.

useReducer + useContext forment une alternative légère à Redux pour la gestion d'état global.

Accéder au DOM et persister des valeurs entre les rendus sans déclencher de re-rendu (bonne réponse)
Uniquement pour référencer des éléments DOM
Remplacer useState
Faire des requêtes HTTP

Explication : useRef retourne un objet mutable { current: valeur } qui persiste pendant toute la durée de vie du composant. Cas d'usage : accès au DOM (ref={inputRef}), stockage de timers/IDs, mémorisation de la valeur précédente.

Modifier ref.current ne déclenche pas de re-rendu, contrairement à setState.

Passer des enfants à un composant via une prop qui est une fonction (bonne réponse)
Une technique pour optimiser les rendus
Une façon de styliser les composants
Un hook React

Explication : Le pattern Render Props consiste à passer une fonction en prop à un composant, qui appelle cette fonction pour savoir quoi afficher. Cela permet de partager du code entre composants. <Composant render={(data) => <Affichage data={data} />} />.

Ce pattern est devenu moins courant avec l'arrivée des hooks, mais il reste utile dans certains cas de bibliothèques.

Le state local est géré dans un composant ; le global est partagé entre plusieurs composants (bonne réponse)
Le local est synchrone ; le global asynchrone
Le local utilise useState ; le global utilise Redux obligatoirement
Il n'y a pas de différence technique

Explication : Le state local est interne à un composant (useState, useReducer). Le state global est accessible par plusieurs composants, souvent via Context API, Redux, Zustand, etc. Le choix dépend de la portée des données.

Commencez toujours par du state local, n'élevez l'état que lorsque plusieurs composants en ont besoin.

Utiliser la virtualisation (react-window, react-virtuoso) (bonne réponse)
Mettre toute la liste dans un useMemo
Faire une pagination côté serveur uniquement
Utiliser des refs partout

Explication : La virtualisation ne rend que les éléments visibles dans le viewport, ce qui réduit considérablement le nombre de nœuds DOM. Des bibliothèques comme react-window ou react-virtuoso implémentent cette technique.

Combinez la virtualisation avec React.memo sur les éléments de la liste pour une performance optimale.

Utiliser un flag isCancelled ou un AbortController dans la fonction de cleanup (bonne réponse)
Les requêtes asynchrones n'ont pas besoin de nettoyage
Mettre la requête dans un try/catch
Utiliser setTimeout

Explication : Pour éviter les fuites mémoire ou les mises à jour sur un composant démonté, on utilise soit une variable booléenne let cancelled = false que l'on vérifie avant setState, soit AbortController pour annuler la requête HTTP.

Avec AbortController :

useEffect(() => { const controller = new AbortController(); fetch(url, { signal: controller.signal }); return () => controller.abort() }, [])

Charger un composant uniquement quand il est nécessaire avec React.lazy et Suspense (bonne réponse)
Un type de chargement asynchrone des images
Une technique pour optimiser les images
Un hook pour charger des données

Explication : React.lazy() permet d'importer dynamiquement un composant (code splitting). Il doit être wrappé dans un composant <Suspense> qui affiche un fallback pendant le chargement.

Le lazy loading est particulièrement efficace sur les routes d'une SPA : chaque page est chargée uniquement quand l'utilisateur y navigue.

Une fonction pure qui prend l'état actuel et une action, et retourne le nouvel état (bonne réponse)
Une méthode pour réduire la taille du state
Un composant React
Un type de hook

Explication : Un reducer est une fonction pure (state, action) => newState. Il décrit comment l'état évolue en réponse à des actions. Il ne doit pas modifier l'état existant mais retourner un nouvel objet (immutabilité).

C'est le même principe que Redux ou Array.prototype.reduce() : chaque action "réduit" l'état actuel vers un nouvel état.

Toujours inclure toutes les dépendances dans le tableau de useEffect/useCallback (bonne réponse)
N'utiliser que des classes
Déclarer les fonctions en dehors du composant
Utiliser var au lieu de let/const

Explication : Une "stale closure" se produit quand un useEffect capture une valeur obsolète. La règle est d'inclure toutes les variables utilisées dans l'effet dans le tableau de dépendances. Le plugin ESLint react-hooks/exhaustive-deps aide à les détecter.

Pour accéder à la dernière valeur sans dépendance, utilisez useRef : const latestValue = useRef(value); latestValue.current = value.

Passer des props à travers plusieurs niveaux de composants ; solutions : Context API ou state management (bonne réponse)
Une technique de forage de données dans les props
Un bug React
Une optimisation de performance

Explication : Le prop drilling consiste à passer des props à travers des composants intermédiaires qui n'en ont pas besoin, juste pour les transmettre plus bas. Solutions : Context API, Redux, Zustand, ou restructuration des composants (composition).

Avant d'utiliser Context, demandez-vous si la composition (faire passer les enfants directement) ne résout pas le problème plus simplement.

Utiliser une bibliothèque comme React Hook Form ou Formik (bonne réponse)
Uniquement avec useState pour chaque champ
Avec les formulaires HTML natifs uniquement
Avec Redux

Explication : Pour des formulaires complexes avec validation, React Hook Form (performant, léger) ou Formik (plus ancien, complet) simplifient la gestion : état, validation, erreurs, soumission. React Hook Form utilise des refs pour de meilleures performances.

React Hook Form s'intègre bien avec Zod ou Yup pour la validation de schémas.

Une fonction qui prend un composant et retourne un nouveau composant amélioré (bonne réponse)
Un composant placé en haut de l'arbre
Un hook personnalisé
Une classe abstraite

Explication : Un HOC est une fonction (Composant) => NouveauComposant. Il encapsule un composant pour lui ajouter des fonctionnalités (authentification, logging, données). Exemple typique : withAuth(MonComposant).

Avec l'arrivée des hooks, de nombreux cas d'usage des HOC sont remplacés par des hooks personnalisés, plus simples et évitant l'imbrication excessive.

useEffect(() => {}, []) = componentDidMount ; useEffect(() => {}, [dep]) = componentDidUpdate ; cleanup = componentWillUnmount (bonne réponse)
useEffect remplace uniquement componentDidMount
useEffect n'a pas de rapport avec le cycle de vie
Il faut utiliser plusieurs hooks différents pour chaque phase

Explication : Avec les hooks : un useEffect avec [] s'exécute au montage (didMount), avec dépendances au montage et mise à jour (didUpdate), et sa fonction de retour (cleanup) au démontage (willUnmount) ou avant la prochaine exécution.

Un même useEffect peut gérer plusieurs phases : pensez à la cleanup pour les souscriptions et timers.

Une fonction JavaScript qui commence par "use" et peut utiliser d'autres hooks (bonne réponse)
Un composant spécial de React
Une bibliothèque externe
Un type de state management

Explication : Un hook personnalisé est une fonction qui extrait de la logique réutilisable et utilise des hooks React internes (useState, useEffect...). Par convention, son nom commence par use (ex: useFetch, useLocalStorage).

Les hooks personnalisés permettent de partager de la logique avec état, pas de l'UI. Pour le partage d'UI, utilisez des composants.

Remonter l'état partagé dans le plus proche ancêtre commun des composants qui en ont besoin (bonne réponse)
Déplacer le state vers le serveur
Utiliser Redux systématiquement
Fusionner tous les states en un seul

Explication : Le "lifting state up" consiste à déplacer l'état partagé dans le composant parent commun le plus proche. Le parent passe les données via props et les callbacks de mise à jour via props également.

C'est la solution avant de recourir à Context ou Redux. Ne remontez que ce qui est nécessaire.

Un outil de développement qui double les rendus pour détecter les effets de bord involontaires (bonne réponse)
Un mode de production plus rapide
Une fonctionnalité pour valider les props
Un mode qui empêche les erreurs

Explication : Le <React.StrictMode> est un wrapper de développement qui double intentionnellement certains rendus et effets pour mettre en évidence des problèmes potentiels (effets sans cleanup, code non idempotent). Il ne fait rien en production.

Ne vous inquiétez pas si votre console.log s'exécute deux fois en dev : c'est Strict Mode qui vérifie la pureté de vos composants.