Les clés indiquent à React quel élément de la nouvelle liste correspond à quel élément de l'ancienne, pour qu'il puisse déplacer, conserver ou retirer des nœuds DOM et leur état au lieu de faire correspondre uniquement par position. Les index de tableau ne marchent que pour des listes statiques. Si les éléments sont réordonnés, insérés en tête ou supprimés, l'index d'un élément donné change, React réutilise le mauvais nœud, et un état comme la valeur d'un champ atterrit sur la mauvaise ligne.
Pourquoi les recruteurs posent cette question
Ça ressemble à une question de débutant, mais les réponses trient vite. La plupart des candidats disent que les clés aident la performance et s'arrêtent là. Le recruteur veut entendre que les clés parlent d'identité et de préservation de l'état, pas seulement de vitesse, et que vous savez nommer le mode de défaillance concret des clés par index. C'est aussi un test rapide pour voir si vous avez débogué un vrai bug de liste ou seulement fait taire un avertissement console.
Comment structurer votre réponse
- Définissez une clé comme une identité, pas comme un indice de performance.
- Expliquez comment la comparaison apparie les anciens et les nouveaux enfants par clé.
- Donnez le bug concret de l'index sur une liste réordonnée ou filtrée.
- Dites ce que vous utilisez comme clé et ce que vous évitez.
Exemple de réponse
Une clé, c'est la façon dont React répond à la question : est-ce le même élément que j'ai vu au rendu précédent ? Sans clé, il apparie les enfants par position, donc quand une ligne bouge, React croit que le contenu a changé et patche le nœud existant au lieu de le déplacer. Avec une clé stable, il sait que l'élément a bougé, garde son nœud DOM et son état, et réordonne. Le piège de l'index, c'est qu'un index décrit la position, pas l'élément. Je me suis fait avoir sur un tableau où chaque ligne avait une case à cocher et un champ de notes. Supprimez la ligne deux et toutes les lignes du dessous remontent d'un index, donc React apparie les mauvais nœuds et vous vous retrouvez avec les notes de quelqu'un d'autre dans votre ligne. Ça ressemble à un bug de données et c'est un bug de clé. Donc j'utilise l'identifiant stable qui vient avec la donnée, en général l'id de la base. S'il n'y en a vraiment pas, je génère un id à la création de l'élément et pas pendant le rendu, parce que générer pendant le rendu donne une clé neuve à chaque passe et remonte toute la liste.
Vous passez cet entretien bientôt ? GhostPilot écoute votre appel en direct, repère la question dès qu'elle est posée et affiche une réponse structurée à l'écran en temps réel. Essayez-le lors de votre prochain entretien blanc, ou prenez un Session Pass à $29, sans abonnement, pour le jour J.
Voir comment ça marcheQuestions de relance à prévoir
- Quand est-il acceptable d'utiliser l'index du tableau comme clé ?
- Que se passe-t-il si deux frères partagent la même clé ?
- Comment réinitialiseriez-vous délibérément l'état d'un composant grâce à une clé ?
Autres questions pour Développeur React
Votre recruteur posera sa propre version de celle-ci. Collez votre véritable fiche de poste dans le Question Predictor gratuit et obtenez les 20 questions que ce poste a le plus de chances de poser, avec ce que chacune cherche vraiment à sonder.
Prédire mes questions