Join the discussion
Comments
Loading comments...
Cookie preferences
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Comment la prop key permet à React d'identifier les éléments de liste et minimiser les mutations DOM.
Lorsque React rend une liste d'éléments, il doit savoir quels éléments ont changé, ont été ajoutés ou ont été supprimés entre les rendus. Sans la prop key, React utilise la correspondance par position — l'élément à l'index 0 correspond à l'élément à l'index 0. Avec les keys, React peut faire correspondre les éléments par identité stable entre les rendus, permettant des déplacements efficaces au lieu de détruire et recréer.
Lorsque votre liste se re-rend, React a deux tableaux d'éléments enfants : les anciens et les nouveaux. Il doit les faire correspondre pour décider quoi mettre à jour, quoi insérer et quoi supprimer.
React fait correspondre les éléments par leur index de position. Si la liste [A, B, C] devient [B, A, C] (réordonnée), React voit que la position 0 a changé de A à B et la position 1 de B à A — causant deux mises à jour et une perte potentielle de state.
React construit une map de key à fiber. [A, B, C] devenant [B, A, C] est perçu comme 'key=b déplacé de la position 1 à 0, key=a déplacé de 1 à 0'. React déplace les nœuds DOM existants — pas de cycle destruction/création.
React enregistre 'Each child in a list should have a unique key prop' lorsqu'il détecte des listes sans keys. C'est un avertissement de performance — votre application fonctionne toujours mais se rend moins efficacement.
Changer la key d'un composant dit à React 'c'est une instance complètement différente'. React va démonter l'ancien composant (en exécutant tous les nettoyages) et monter un nouveau. C'est utile pour réinitialiser délibérément le state d'un composant.
Une key qui identifie un élément entre les rendus — généralement un ID de base de données ou un slug. Doit être unique parmi les siblings.
Utiliser l'index du tableau comme key n'est sûr que pour les listes statiques et non réordonnables. Pour les listes dynamiques, cela cause des bugs lors du réordonnancement.
Lorsque React fait correspondre un ancien et un nouvel élément par key, il réutilise le nœud DOM existant et ne met à jour que les attributs modifiés.
Changer délibérément la prop key d'un composant le réinitialise — utile pour réinitialiser le state d'un formulaire lors du changement entre des éléments.
1// ❌ Bad — index as key on dynamic list2{todos.map((todo, index) => (3 <TodoItem key={index} todo={todo} />4))}5// If you delete item at index 0, all items shift — React6// sees every item as 'changed' and re-renders all of them.78// ✅ Good — stable unique ID9{todos.map((todo) => (10 <TodoItem key={todo.id} todo={todo} />11))}12// Deleting one item: React only removes that one node.13// All others are matched by key and kept untouched.1415// 🔄 Intentional reset via key change16<UserProfile key={userId} userId={userId} />17// Changing userId resets all internal state — no need for18// a manual reset effect.
Les keys sont l'indice de React pour faire correspondre les anciens et nouveaux éléments de liste. Une bonne key signifie que React peut réutiliser les nœuds DOM (rapide), préserver le state des composants (correct) et déclencher des mises à jour minimales (efficace). Une mauvaise key (ou sans key) signifie que React travaille soit beaucoup plus que nécessaire, soit perd le state des composants de manière inattendue.
You have a form builder where users can add, remove, and reorder form fields via drag-and-drop. Each field has its own validation state and user input. After reordering, the input values appear in the wrong fields.
Using array index as key means when a user drags field 3 to position 1, React matches the component at position 1 (old field 1) with the new key=1 (field 3's new position). The old component instance retains field 1's input value but now renders field 3's label — a state/UI mismatch.
Assign each form field a stable UUID when created (e.g., `crypto.randomUUID()`). Use this as the key. Now drag-and-drop reordering just changes positions — React recognizes each component by its UUID and moves the DOM nodes without resetting any state.
Takeaway: For any list that supports add, remove, reorder, or filter operations, always use a stable unique ID as the key. Array index only works for truly static, never-reordered lists (like a static navigation menu).
A user profile edit form should reset to clean state whenever the selected user changes. You tried resetting state in useEffect but there's a flash of old data before the reset takes effect.
Setting state in useEffect happens AFTER render and paint. The sequence is: render (shows old user's data) → paint (user sees stale data) → useEffect fires (resets state) → re-render (shows new user's data). This causes a visible flash.
Add `key={userId}` to the form component. When userId changes, React sees a different key at the same position and unmounts the old instance entirely, creating a fresh one. No useEffect needed — the new instance starts with default initial state. Zero flash.
Takeaway: The `key` prop is not just for lists — it's a powerful tool to force React to destroy and recreate a component. Use it whenever you want a 'clean slate' without the complexity and timing issues of manually resetting state in useEffect.