3 erreurs de réaction des débutants qui peuvent ruiner votre application

En tant que développeur React, vous êtes obligé de faire des erreurs lors du codage 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 en apprendre davantage sur eux 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, via La puissante fonctionnalité d'écoute d'événements de JavaScript. Peut-être souhaitez-vous changer la couleur d'un bouton lorsque vous le survolez. Peut-être souhaitez-vous envoyer les données du formulaire au serveur lors de la soumission. Dans ces deux scénarios, vous devez transmettre une fonction de rappel à l'événement pour effectuer la réaction souhaitée. C'est là que certains développeurs React font des erreurs.

Considérez le composant suivant, par exemple :

exporterdéfautfonctionApplication() {
fonctiongérerSoumettre(e) {
 e.preventDefault()
console.enregistrer("Formulaire soumis !")
 }
fonctionimprimer(nombre) {
console.enregistrer("Imprimer", nombre)
 }
fonctiondoubleur(nombre) {
retour() => {
console.enregistrer("Double", nombre * 2)
 }
 }
retour (
 <>
 {/* Le code ira ici */}
 </>
 )
}

Ici, vous avez 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 ce sera la clé pour comprendre ce que vous apprendrez ensuite.

Maintenant, en passant au JSX, commençons par la première et la plus courante façon de transmettre une fonction en tant que gestionnaire d'événements :

<formeronSubmit={handleSubmit}>
<saisirtaper="texte"nom="texte"valeur par défaut="initial"/>
<bouton>Soumettrebouton>
former>

Cet exemple transmet le nom de la fonction à l'événement via la prop onSubmit afin que React appelle handleSubmit lorsque vous soumettez le formulaire. Dans handleSubmit, vous pouvez accéder à l'objet événement, 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 transmettre une fonction de gestionnaire d'événements consiste à l'appeler à l'intérieur de la fonction de rappel. Essentiellement, vous transmettez à onClick une fonction qui appelle print() pour vous :

{[1, 5, 7].carte((nombre) => {
retour (
 imprimer (nombre)}>
 Imprimer {nombre}
 </button>
 )
})}

Cette méthode est utile dans les scénarios 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 seriez pas en mesure de transmettre des arguments à la fonction.

La troisième méthode est celle où beaucoup de développeurs font beaucoup d'erreurs. Rappelons que la fonction doubler renvoie une autre fonction :

fonctiondoubleur(nombre) {
retour() => {
console.enregistrer("Double", nombre * 2)
 }
}

Maintenant, si vous l'avez utilisé dans le JSX comme ceci :

{[1, 5, 7].carte((nombre) => {
retour (
 doubleur (nombre)}>
 Double {nombre}
 </button>
 )
})}

Dans ce cas, la fonction que vous revenez de double() est ce qui est attribué à onClick. C'est essentiellement la même chose que de copier la fonction renvoyée et de la coller en ligne dans onClick. Cette dernière méthode n'a aucun cas d'utilisation. La plupart du temps, il vaut mieux ajouter la fonction en tant que variable (première méthode) ou appeler la fonction dans un rappel (deuxième méthode).

Les trois techniques sont valides car, dans tous les cas, vous transmettez une fonction à l'événement. Dans React, vous devez vous assurer de transmettre une fonction à une propriété d'événement. Il peut s'agir d'une variable, d'une fonction codée en dur (en ligne) ou d'un objet/fonction qui renvoie une autre fonction.

2. Sortie de zéro lors d'un faux contrôle

Quand tu es rendu conditionnel d'un élément dans React, vous pouvez utiliser une instruction if...else ou la technique de court-circuit. Le court-circuit implique l'utilisation de la double esperluette (&&). Si la condition avant l'esperluette est vraie, le navigateur exécute le code suivant l'esperluette. Sinon, le navigateur n'exécute aucun code.

Le court-circuit est la meilleure technique grâce à sa syntaxe concise, mais il a un effet secondaire que de nombreux développeurs ne remarquent pas. Cette erreur se produit parce qu'on ne comprend pas exactement comment JSX fonctionne avec de fausses valeurs.

Considérez le code suivant :

exporterdéfautfonctionApplication() {
constante tableau = [1, 2, 3, 4]
retour (


 {array.length && (


Déployer articles :</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Tant que le tableau contient quelque chose, React imprimera chaque élément de la page. C'est à cause de la array.length check renvoie une valeur de vérité. Mais que se passe-t-il si votre tableau est vide? Tout d'abord, les éléments suivants s'afficheront sur la page, ce à quoi vous vous attendez. Cependant, vous trouveriez un zéro étrange apparaissant sur votre écran.

La raison en est que array.length renvoie zéro. La valeur zéro est fausse en JavaScript. Et le problème est que JSX rend zéro à l'écran. D'autres valeurs fausses telles que null, false et undefined ne sont pas rendues. Cela peut entraîner une mauvaise expérience utilisateur car zéro apparaîtra toujours sur la page. Parfois, le zéro peut être si petit que vous ne le remarquez même pas.

La solution consiste à s'assurer de ne renvoyer que null, undefined ou false. Pour ce faire, vous cochez explicitement zéro dans la condition au lieu de vous fier à une valeur fausse :

exporterdéfautfonctionApplication() {
constante tableau = [1, 2, 3, 4]
retour (


 {array.length !== 0 && (


Déployer articles :</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Maintenant, la valeur zéro ne s'affichera pas à l'écran même lorsque le tableau est vide.

3. Échec de la mise à jour correcte de l'état

Lorsque vous mettez à jour l'état d'un composant React, vous devez le faire correctement pour éviter tout effet secondaire indésirable. Les pires erreurs sont celles qui ne génèrent aucune erreur pour vous. Ils rendent difficile le débogage et la découverte du problème. Les mauvaises mises à jour de l'état ont tendance à avoir cet effet.

Cette erreur provient du fait que vous ne comprenez pas comment mettre à jour l'état lorsque vous utilisez l'état existant. Considérez le code suivant par exemple :

exporterdéfautfonctionApplication() {
constante [tableau, setArray] = useState([1, 2, 3])
fonctionaddNumberToStart() {
 array.unshift (nombre)
 setArray (tableau)
 }
fonctionaddNumberToEnd() {
 array.unshift (nombre)
 setArray (tableau)
 }
retour (
 <>
 {tableau.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
console.log (tableau)
 }}
 >
 Ajouter 0 au début/à la fin
 </button>
 </>
 )
}

Si vous deviez exécuter le code ci-dessus, vous remarqueriez que les deux fonctions ajoutaient zéro au début et à la fin du tableau. Mais il n'a pas ajouté les zéros 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 faites muter votre état avec tableau.push(). React avertit explicitement que l'état doit être immuable dans React, ce qui signifie que vous ne pouvez pas le changer du tout. React utilise des valeurs référentielles avec son état.

La solution consiste à accéder à l'état actuel (currentArray), à faire une copie de cet état et à effectuer vos mises à jour sur cette copie :

fonctionaddNumberToStart(nombre) {
 setArray((tableaucourant) => {
retour [nombre,... tableaucourant]
 })
}
fonctionaddNumberToStart(nombre) {
 setArray((tableaucourant) => {
retour [...tableaucourant, nombre]
 })
}

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 surtout, les mises à jour se refléteront 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. Les trois erreurs couvertes ici proviennent d'une mauvaise compréhension de JavaScript. Parce que React est un framework JavaScript, vous aurez besoin d'une solide compréhension de JavaScript pour travailler avec React. Cela signifie apprendre les concepts importants les plus liés au développement de React.