En tant que développeur React, vous allez certainement faire quelques erreurs lorsque vous coderez avec le framework. Certaines de ces erreurs sont assez courantes. Et en raison de leur nature subtile, vous pourriez avoir du mal à identifier ces problèmes pour déboguer votre application.
Découvrez trois des erreurs React les plus courantes commises par les développeurs. Vous pouvez commettre ces erreurs en tant que développeur React débutant, intermédiaire ou avancé. Mais apprendre à les connaître et leurs implications vous aidera à les éviter et à les résoudre.
1. Utilisation du mauvais type de fonction de rappel
La gestion des événements est une pratique courante dans React, grâce à la puissante fonctionnalité d’écoute d’événements de JavaScript. Vous souhaitez peut-être changer la couleur d’un bouton lorsqu’il est survolé. Vous voulez peut-être envoyer les données d’un formulaire au serveur lorsqu’il est soumis. Dans ces deux scénarios, vous devez passer une fonction de rappel à l’événement pour effectuer la réaction souhaitée. C’est là que certains développeurs React commettent des erreurs.
Prenons l’exemple du composant suivant :
export default function App() {
function handleSubmit(e) {
e.preventDefault()
console.log("Form submitted!")
}
function print(number) {
console.log("Print", number)
}
function doubler(number) {
return () => {
console.log("Double", number * 2)
}
}
return (
<>
{/* Code will go here */}
</>
)
}
Vous avez ici trois fonctions distinctes. Alors que les deux premières fonctions ne renvoient rien, la troisième renvoie une autre fonction. Vous devez garder cela à l’esprit, car c’est la clé pour comprendre ce que vous allez apprendre par la suite.
Passons maintenant au JSX. Commençons par la première façon, la plus courante, de passer une fonction en tant que gestionnaire d’événement :
<form onSubmit={handleSubmit}>
<input type="text" name="text" defaultValue="initial"/>
<button>Submit</button>
</form>
Cet exemple transmet le nom de la fonction à l’événement via la propriété onSubmit, de sorte que React appelle handleSubmit lorsque vous soumettez le formulaire. À l’intérieur de handleSubmit, vous pouvez accéder à l’objet événement, ce qui vous donne accès à des propriétés telles que event.target.value et des méthodes comme event.preventDefault().
La deuxième façon de passer une fonction de gestion d’événement est de l’appeler à l’intérieur de la fonction de rappel. Essentiellement, vous passez à onClick une fonction qui appelle print() pour vous :
{[1, 5, 7].map((number) => {
return (
<button key={number} onClick={() => print(number)}>
Print {number}
</button>
)
})}
Cette méthode est utile dans les cas où vous souhaitez transmettre des données locales à la fonction. L’exemple ci-dessus transmet chaque nombre à la fonction print(). Si vous utilisiez la première méthode, vous ne pourriez pas passer d’arguments à la fonction.
C’est avec la troisième méthode que de nombreux développeurs commettent des erreurs. Rappelons que la fonction doubleur renvoie une autre fonction :
function doubler(number) {
return () => {
console.log("Double", number * 2)
}
}
Maintenant, si vous l’utilisez dans le JSX comme suit :
{[1, 5, 7].map((number) => {
return (
<button key={number} onClick={() => doubler(number)}>
Double {number}
</button>
)
})}
Dans ce cas, la fonction renvoyée par double() est ce qui est assigné à onClick. Cela revient essentiellement à copier la fonction retournée et à la coller en ligne dans onClick. Cette dernière méthode n’a aucun cas d’utilisation. La plupart du temps, il est préférable d’ajouter la fonction en tant que variable (première méthode) ou d’appeler la fonction à l’intérieur d’un callback (deuxième méthode).
Ces trois techniques sont valables car, dans tous les cas, vous passez une fonction à l’événement. Dans React, vous devez vous assurer que vous passez une fonction à une propriété d’événement. Il peut s’agir d’une variable, d’une fonction codée en dur (inline) ou d’un objet/fonction qui renvoie une autre fonction.
2. Sortie de zéro lors d’une vérification Falsy
Lorsque vous effectuez un rendu conditionnel d’un élément dans React, vous pouvez utiliser une instruction if…else ou la technique du court-circuitage. Le court-circuitage implique l’utilisation de la double esperluette (&& ;). Si la condition précédant l’esperluette est vraie, le navigateur exécute le code suivant l’esperluette. Dans le cas contraire, le navigateur n’exécute aucun code.
Le court-circuitage est la meilleure technique grâce à sa syntaxe concise, mais elle s’accompagne d’un effet secondaire que de nombreux développeurs ne remarquent pas. Cette erreur est due au fait que l’on ne comprend pas exactement comment JSX fonctionne avec les valeurs falsy.
Considérons le code suivant :
export default function App() {
const array = [1, 2, 3, 4]
return (
<div>
{array.length && (
<div>
<span>Array items:</span> {array.join(", ")}
</div>
)}
</div>
)
}
Tant que le tableau contient quelque chose, React imprimera chaque élément sur la page. Ceci est dû à la fonction array.length renvoie une valeur vraie. Mais que se passe-t-il si votre tableau est vide ? Tout d’abord, les éléments suivants s’afficheront sur la page, ce qui est normal. Cependant, vous verrez un zéro bizarre s’afficher sur votre écran.
La raison en est que array.length renvoie zéro. La valeur zéro est une valeur faible en JavaScript. Le problème est que JSX rend zéro à l’écran. Les autres valeurs falsy comme null, false et undefined ne sont pas rendues. Cela peut entraîner une mauvaise expérience pour l’utilisateur, car le zéro apparaîtra toujours sur la page. Parfois, le zéro est si petit que vous ne le remarquez même pas.
La solution est de s’assurer de ne renvoyer que null, undefined ou false. Pour ce faire, vous vérifiez explicitement la présence de zéro dans la condition au lieu de vous fier à une valeur fictive :
export default function App() {
const array = [1, 2, 3, 4]
return (
<div>
{array.length !== 0 && (
<div>
<span>Array items:</span> {array.join(", ")}
</div>
)}
</div>
)
}
Désormais, la valeur zéro n’apparaîtra pas à l’écran, même si le tableau est vide.
3. Mauvaise mise à jour de l’état
Lorsque vous mettez à jour l’état d’un composant React, vous devez le faire correctement pour éviter tout effet de bord indésirable. Les pires erreurs sont celles qui ne provoquent aucune erreur. Elles rendent difficile le débogage et la recherche du problème. Les mauvaises mises à jour d’état ont tendance à avoir cet effet.
Cette erreur provient du fait que l’on ne comprend pas comment mettre à jour l’état lorsque l’on utilise l’état existant. Prenons l’exemple du code suivant :
export default function App() {
const [array, setArray] = useState([1, 2, 3])
function addNumberToStart() {
array.unshift(number)
setArray(array)
}
function addNumberToEnd() {
array.unshift(number)
setArray(array)
}
return (
<>
{array.join(", ")}
<br />
<button
onClick={() => {
addNumberToStart(0)
addNumberToEnd(0)
console.log(array)
}}
>
Add 0 to Start/End
</button>
</>
)
}
Si vous exécutez le code ci-dessus, vous remarquerez que les deux fonctions ont ajouté des zéros au début et à la fin du tableau. Mais les zéros n’ont pas été ajoutés au tableau imprimé sur la page. Vous pouvez continuer à cliquer sur le bouton, mais l’interface utilisateur reste la même.
C’est parce que, dans les deux fonctions, vous mutez votre état avec array.push(). React prévient explicitement que l’état doit être immuable dans React, ce qui signifie que vous ne pouvez pas le modifier du tout. React utilise des valeurs référentielles avec son état.
La solution est d’accéder à l’état actuel (currentArray), de faire une copie de cet état, et de faire vos mises à jour sur cette copie :
function addNumberToStart(number) {
setArray((currentArray) => {
return [number, ...currentArray]
})
}
function addNumberToStart(number) {
setArray((currentArray) => {
return [...currentArray, number]
})
}
C’est la bonne méthode pour mettre à jour l’état dans React. Maintenant, lorsque vous cliquez sur le bouton, il ajoute zéro au début et à la fin du tableau. Mais le plus important, c’est que les mises à jour se reflètent immédiatement sur la page.
Autres concepts JavaScript importants pour React
Cet article a couvert certaines des erreurs courantes à éviter lors du codage dans React. Ces trois erreurs découlent d’une mauvaise compréhension de JavaScript. React étant un framework JavaScript, vous aurez besoin d’une solide compréhension de JavaScript pour travailler avec React. Cela signifie qu’il faut apprendre les concepts importants qui se rapportent le plus au développement de React.