Comment utiliser les clés de réaction pour éviter les conflits de composants

L'approche React peut être assez compliquée et vous pouvez rencontrer un comportement inattendu ou même des bogues subtils. Se débarrasser de ces bogues peut être assez difficile si vous n'êtes pas familier avec leur cause.

Un bogue particulier survient lorsque vous effectuez le rendu conditionnel du même composant avec des propriétés différentes. Explorez ce bogue en détail et découvrez comment utiliser les touches React pour le résoudre.

Les composants React ne sont pas toujours indépendants

Sa syntaxe simple est l'une des principales raisons tu devrais apprendre React. Mais, malgré de nombreux avantages, le framework n'est pas sans bugs.

Le bogue que vous découvrirez ici se produit lorsque vous effectuez le rendu conditionnel du même composant, mais que vous lui transmettez des accessoires différents.

Dans des cas comme celui-ci, React supposera que les deux composants sont identiques, il ne prendra donc pas la peine de rendre le deuxième composant. Par conséquent, tout état que vous définissez dans le premier composant persistera entre les rendus.

Pour démontrer, prenons cet exemple. Tout d'abord, vous avez ce qui suit Comptoir composant:

import { useState, useEffect } from"react"
exportfunctionCounter({name}) {
const [count, setCount] = useState(0)
return(


{name}</div>
 setCount(c => c - 1)}> - </button>


 setCount(c => c + 1)}> + </button>
 </div>
 )
}

Ce Comptoir composant accepte un nom du parent via la déstructuration d'objet, qui est un moyen de utiliser des accessoires dans React. Ensuite, il rend le nom dans un. Il retourne également deux boutons: un pour décrémenter le compter dans l'état et l'autre pour l'incrémenter.

Gardez à l'esprit qu'il n'y a rien de mal avec le code ci-dessus. Le bogue provient du bloc de code suivant (le composant App), qui utilise le compteur :

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <Countername="Kingsley" />: <Countername="Sally" /> }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Par défaut, le code ci-dessus rend le compteur nommé Kingsley. Si vous incrémentez le compteur à cinq et cliquez sur le Échanger bouton, il affichera le deuxième compteur nommé Sally.

Mais le problème est que le compteur ne se réinitialisera pas à son état par défaut de zéro après les avoir échangés.

Ce bogue se produit car les deux états restituent les mêmes éléments dans le même ordre. React ne sait pas que le compteur "Kingsley" est différent du compteur "Sally". La seule différence réside dans le nom prop mais, malheureusement, React ne l'utilise pas pour différencier les éléments.

Vous pouvez contourner ce problème de deux manières. La première consiste à modifier votre DOM et à rendre les deux arbres différents. Cela nécessite que vous compreniez qu'est-ce que le DOM. Par exemple, vous pouvez envelopper le premier compteur à l'intérieur d'un élément et le second à l'intérieur d'un élément:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return (


 { isKingsley? 
 (<div>
"Kingsley" /> 
 </div>)
: 
 (<section>
"Sally" /> 
 </section>)
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Si vous incrémentez le compteur "Kingsley" et cliquez sur Échanger, l'état est remis à 0. Encore une fois, cela se produit parce que la structure des deux arbres DOM est différente.

Quand le estKingsley variable est vrai, la structure sera div >div > Comptoir (un div contenant un div, contenant un compteur). Lorsque vous permutez l'état du compteur à l'aide du bouton, la structure devient div > section > Comptoir. En raison de cette divergence, React affichera automatiquement un nouveau compteur avec un état de réinitialisation.

Vous ne voudrez peut-être pas toujours modifier la structure de votre balisage de cette manière. La deuxième façon de résoudre ce bogue évite le besoin d'un balisage différent.

Utiliser des clés pour rendre un nouveau composant

Les clés permettent à React de différencier les éléments pendant le processus de rendu. Donc, si vous avez deux éléments exactement identiques et que vous souhaitez signaler à React que l'un est différent de l'autre, vous devez définir un attribut de clé unique sur chaque élément.

Ajoutez une clé à chaque compteur, comme ceci :

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? 
"Kingsley" name="Kingsley" />: 
"Sally" name="Sally" /> 
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Maintenant, lorsque vous incrémentez le compteur "Kingsley" et cliquez sur Échanger, React rend un nouveau compteur et remet l'état à zéro.

Vous devez également utiliser des clés lorsque vous rendez un tableau d'éléments du même type, car React ne connaîtra pas la différence entre chaque élément.

exportdefaultfunctionApp() {
const names = ["Kingsley", "John", "Ahmed"]
return(


 { names.map((name, index) => {
return<Counterkey={index}name={name} />
 })}
 </div>
 )
}

Lorsque vous attribuez des clés, React associera un compteur séparé à chaque élément. De cette façon, il peut refléter toutes les modifications que vous apportez au tableau.

Un autre cas d'utilisation de clé avancée

Vous pouvez également utiliser des clés pour associer un élément à un autre élément. Par exemple, vous souhaiterez peut-être associer un élément d'entrée à différents éléments en fonction de la valeur d'une variable d'état.

Pour illustrer, modifiez le composant App :

import { useState } from"react"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <div>Kingsley's Scorediv>: <div>Sally's scorediv> }
"Kingsley": "Sally" } type="number"/>


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Maintenant, chaque fois que vous permutez entre le éléments pour Kingsley et Sally, vous changez automatiquement l'attribut clé de votre entrée entre "Kingsley" et "Sally". Cela forcera React à restituer complètement l'élément d'entrée à chaque clic sur le bouton.

Plus de conseils pour optimiser les applications React

L'optimisation du code est essentielle pour créer une expérience utilisateur agréable dans votre application Web ou mobile. Connaître les différentes techniques d'optimisation peut vous aider à tirer le meilleur parti de vos applications React.

La meilleure partie est que vous pouvez également appliquer la plupart de ces techniques d'optimisation avec les applications React Native.