Questions d'entretien React

Ce que couvrent les entretiens React

Exemples de questions d'entretien React

• Quel problème les hooks React résolvent-ils et quelles sont les règles des hooks ?
  Ce qu'une bonne réponse couvre

  • Difficulté de réutilisation de la logique avec les classes
  • Problèmes de `this` et de complexité des lifecycle
  • Règles : appeler hooks au niveau racine, pas dans des conditions/boucles
  • Règles : uniquement depuis des composants React ou des hooks personnalisés

  Voir un exemple de réponse

  Les hooks React résolvent plusieurs problèmes des composants à classes : la réutilisation de la logique étatique entre composants était difficile avec les classes (nécessité de HOCs ou render props), la gestion du `this` était source d'erreurs, et les méthodes de cycle de vie fragmentaient la logique connexe. Les hooks permettent d'extraire la logique dans des fonctions réutilisables et d'éviter les classes. Les règles des hooks sont : 1) Appelez les hooks uniquement au niveau racine (pas dans des conditions, boucles ou fonctions imbriquées) pour garantir le même ordre à chaque rendu. 2) Appelez les hooks uniquement depuis des composants React ou des hooks personnalisés. Violer ces règles peut causer des bugs subtils, et un linter (eslint-plugin-react-hooks) est fortement recommandé.

• Expliquez la différence entre useMemo et useCallback, et quand chacun est utile.
  Ce qu'une bonne réponse couvre

  • useMemo mémorise une valeur calculée
  • useCallback mémorise une fonction
  • Éviter des calculs coûteux inutiles avec useMemo
  • Éviter des re-rendus d'enfants avec useCallback passée comme prop
  • Ne pas utiliser de manière excessive, mesurer d'abord

  Voir un exemple de réponse

  useMemo et useCallback sont deux hooks d'optimisation qui mémorisent des valeurs. useMemo prend une fonction de calcul et un tableau de dépendances, et ne recalcule la valeur que si les dépendances changent. Il est utile pour des calculs coûteux (par exemple, filtrage d'une grande liste) : `const sortedList = useMemo(() => expensiveSort(list), [list])`. useCallback mémorise une fonction, retournant la même référence tant que les dépendances n'ont pas changé. Il est surtout utile pour éviter des re-rendus inutiles d'enfants qui utilisent des props fonction (ex: dans un composant mémorisé avec React.memo). Par exemple, `const handleClick = useCallback(() => dispatch(action), [dispatch])`. Une erreur courante est de tout mémoriser sans nécessité ; il faut d'abord identifier des goulots d'étranglement avec le profiling.

• Qu'est-ce qui provoque le re-rendu d'un composant et comment éviter les re-rendus inutiles ?
  Ce qu'une bonne réponse couvre

  • Changement d'état (useState, useReducer) dans le composant
  • Props reçues changent (comparaison superficielle)
  • Contexte (Context) mis à jour
  • Composant parent re-rend (rendu enfant par défaut)
  • Éviter : React.memo, useMemo/useCallback, extraire état local

  Voir un exemple de réponse

  Un composant React se re-rend lorsque : son état local change (via useState ou useReducer), les props qu'il reçoit changent (comparaison superficielle), un contexte consommé est mis à jour, ou son composant parent se re-rend (car React re-rend les enfants par défaut). Pour éviter des re-rendus inutiles, on peut : utiliser React.memo pour mémoriser un composant (ne se re-rend que si ses props changent), utiliser useMemo/useCallback pour stabiliser les valeurs et fonctions passées en props, remonter l'état stable (éviter de créer des objets/fonctions dans le rendu), et extraire l'état qui change dans des sous-composants pour isoler les re-rendus. Il est important de noter que React compare les props superficiellement, donc passer un nouvel objet à chaque rendu (même avec les mêmes valeurs) provoque un re-rendu chez l'enfant. Une erreur courante est de tout mettre dans le state global, alors que souvent un état local suffit.

• Comment fonctionne la prop key dans les listes et pourquoi est-elle importante ?
  Ce qu'une bonne réponse couvre

  • Identifier chaque élément de manière stable et unique
  • Aider React à réconcilier efficacement le DOM virtuel
  • Éviter de réinitialiser l'état interne des composants
  • Ne pas utiliser l'index comme clé si l'ordre change
  • Impact sur les animations, la saisie dans des formulaires

  Voir un exemple de réponse

  La prop `key` est un attribut spécial qui aide React à identifier chaque élément dans une liste de manière stable et unique. Lors du rendu d'une liste, React utilise les clés pour déterminer quels éléments ont été modifiés, ajoutés ou supprimés, optimisant ainsi la réconciliation du DOM virtuel. Sans clé, React utilise l'index par défaut, ce qui peut causer des bugs : si l'ordre change, l'état interne d'un composant (ex: saisie dans un champ, état de scroll) peut être réaffecté de manière incorrecte. Il est critique d'utiliser des identifiants stables (ID de base de données, uuid) plutôt que des indices, surtout si la liste peut être réordonnée, filtrée ou mise à jour. Ne pas utiliser de clé ou utiliser l'index peut aussi casser les animations de transition. Les clés doivent être uniques parmi les frères et sœurs, et stables dans le temps.

• Créez un champ de recherche avec debounce à l'aide d'un hook personnalisé.
  Ce qu'une bonne réponse couvre

  • Créer un hook useDebounce
  • Utiliser useState et useEffect
  • Utiliser setTimeout et clearTimeout
  • Appliquer le debounce sur la valeur et la fonction de rappel
  • Gérer le nettoyage (cleanup) avec useEffect

  Voir un exemple de réponse

  Voici la création d'un champ de recherche avec debounce à l'aide d'un hook personnalisé. Le hook prend une valeur initiale et un délai, et retourne une valeur délayée qui se met à jour après un délai d'inactivité. Le composant utilise ce hook pour différer la recherche.

  import { useState, useEffect } from 'react';
  
  // Hook personnalisé useDebounce
  function useDebounce(value, delay) {
    const [debouncedValue, setDebouncedValue] = useState(value);
  
    useEffect(() => {
      // Mettre à jour la valeur après le délai
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);
  
      // Nettoyer le timeout si la valeur change (ou si le composant est démonté)
      return () => {
        clearTimeout(handler);
      };
    }, [value, delay]);
  
    return debouncedValue;
  }
  
  // Exemple d'utilisation dans un composant Search
  function Search() {
    const [searchTerm, setSearchTerm] = useState('');
    const debouncedSearchTerm = useDebounce(searchTerm, 500);
  
    // Effectuer la recherche (ex: appel API) uniquement quand la valeur debounced change
    useEffect(() => {
      if (debouncedSearchTerm) {
        console.log('Recherche pour :', debouncedSearchTerm);
        // Appel API ici
      }
    }, [debouncedSearchTerm]);
  
    return (
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Rechercher..."
      />
    );
  }

• Quand utiliseriez-vous Context plutôt qu'une bibliothèque d'état comme Redux ou React Query ?
  Ce qu'une bonne réponse couvre

  • Contexte adapté pour l'état global peu fréquent
  • Redux/React Query pour la gestion d'état serveur
  • Context peut causer des re-rendus larges
  • Redux pour logique complexe et middleware
  • React Query pour cache, synchronisation, mutations

  Voir un exemple de réponse

  J'utiliserais Context plutôt que Redux ou React Query lorsque l'état est global mais peu fréquemment mis à jour et partagé par de nombreux composants, comme le thème, la locale, ou l'utilisateur connecté. Context est simple, intégré à React et ne nécessite pas de bibliothèque supplémentaire. Cependant, Context provoque des re-rendus de tous les consommateurs lors de chaque mise à jour, donc pour des données qui changent souvent (ex: input en temps réel), Context n'est pas adapté. Redux est préférable pour une logique d'état complexe, des mises à jour fréquentes, ou lorsqu'on a besoin de middleware (redux-saga, thunk) et d'outils de déverminage. React Query est excellent pour la gestion d'état serveur (fetching, caching, synchronisation, mutations) car il abstrait les appels API et gère le cache, ce que Context ne fait pas. En résumé : Context = état global simple et rarement mis à jour ; Redux = logique métier complexe côté client ; React Query = données asynchrones serveur.

Comment se préparer

• Soyez capable d'expliquer à voix haute le rendu — les recruteurs se soucient plus de votre modèle mental que des API mémorisées.
• Pratiquez de petits exercices de codage en direct (un compteur, une entrée avec debounce, un fetch avec liste) jusqu'à ce qu'ils deviennent automatiques.
• Connaissez les compromis de chaque outil d'état plutôt que d'en choisir un par défaut.
• Mentionnez les outils de performance (React DevTools Profiler) lorsque vous discutez d'optimisation.

Questions fréquemment posées