React est vraiment devenu un outil incontournable pour les développeurs front-end. Cependant, il y a une réelle différence entre ceux qui utilisent React et ceux qui le comprenne vraiment : la rapiditié d'exécution et la lisibilité du code sont deux compétences primordiales pour tout développeur expérimenté.
Si vous souhaitez optimiser votre temps de développement et écrire un code propre, ces quelques techniques peuvent vous faire gagner un temps précieux. 😉
1. Utilisez les conditions ternaires avec &&
Utiliser des conditions ternaires est déjà une bonne première approche avec React ! On peut en effet condenser notre code pour le rendre plus clair.
Cependant, il n'est pas rare de constater ce genre de condition ternaire pour les développeurs débutants :
{
isLoggedIn ? <LogoutButton /> : null
}Voici ce qu'il faut faire :
{
isLoggedIn && <LogoutButton />
}Attends, qu'est-ce qu'il s'est passé ? 😳
Ici, nous avons juste utilisé &&. Il s'agit d'un raccourci qui permet de dire à React : si ma condition est validée, alors affiche ce qu'il y a à droite. Sinon, ne fait rien.
2. Utiliser l'affectation par décomposition
L'affectation par décomposition est très importante avec React. Elle améliore la clarté du code et réduit sa longueur ce qui facilite une bonne lecture.
Quand on parle d'affectation par décomposition, on parle en fait d'extraire directement des valeurs à partir des tableaux ou des objets.
Voici ce qu'un code de développeur junior ferait :
const value = this.props.value;
const other = this.props.other;
const again = this.props.again;Voici ce que vous devez faire à la place en tant que développeur expérimenté :
const { value, other, again } = this.propsQuand même plus simple ! 👀
3. Utiliser les React Fragments proprement
Quand on veut retourner plusieurs éléments dans un composant React sans les encapsuler dans un div, on peut utiliser les Fragments.
Un Fragment, aussi appelé un React Fragment, est un composant utilisé uniquement pour regrouper plusieurs éléments enfants sans ajouter de noeud supplémentaire au DOM (comprendre une autre division).
Cela permet de garder le DOM propre, mais on peut aller encore plus vite en utilisant la version raccourcie des Fragments : <> </>.
Voici ce qu'il ne faut par faire :
<React.Fragment>
<Component />
<Component />
</React.Fragment>Voici ce qu'il faut privilégier :
<>
<Component />
<Component />
</>C'est plus propre ! ✨
4. Utiliser le spread operator
Le spread operator (...) est extrêmement utile pour copier ou étendre des objets et des tableaux.
Le spread operator (...) est une fonctionnalité de JavaScript introduite avec ES6 qui nous permet de déplier (ou "spreader") les éléments d'un tableau ou d'un objet dans un autre tableau ou objet. Vous allez vite comprendre avec notre petit exemple.
Ne faites plus ça :
<Component
propA={props.propA}
propB={props.propB}
/>Mais privilégiez cette façon :
<Component {...props} />Ici, nous passons nos props à notre composant de façon dynamique : plus besoin de s'embêter à passer chaque propriété une par une. Quand nous ajouterons une nouvelle propriété au composant parent, elle sera dynamiquement apportée au composant enfant.
5. Utiliser le chaînage optionnel
Il est extrêmement important d'utiliser le chaînage optionnel avec React. Mais encore faut-il s'avoir l'utiliser.
Le chaînage optionnel (?.) est une nouvelle fonctionnalité JavaScript qui permet d’accéder à des propriétés profondément imbriquées sans avoir à vérifier à chaque niveau si l’objet ou la propriété existe. C’est très pratique pour éviter les erreurs de type "cannot read property of undefined".
Par exemple voici ce qu'il ne faut pas faire :
const name = props.user && props.user.name;Utilisez le chaîne optionnel :
const name = props.user?.name;L'idée est de demander à React de vérifier si la valeur user existe sinon de retourner null.
L'importance d'être bien formé
Trop souvent, des développeurs juniors sortent d'une formation qui leur permet d'apprendre React avec les mauvaises techniques et conventions. Parfois, ils apprennent React sur les anciennes versions (voir un de nos articles qui en parle). Ce qui fait qu'à la fin, vous vous retrouverez avec des compétances que personne ne voudra ou avec des manières de créer vos projets qui vous rendront la vie très compliquée tout au long de votre carrière.
Ok, mais comment éviter ça ?
En choisissant une très bonne formation complète.
C'est évident vous allez me dire, et pourtant, combien le font vraiment ?
Si vous avez apprécié tout cet article, sachez que vous n'êtes pas au bout de vos surprises. Si vous voulez éviter de perdre votre temps sur des choses qui n'en valent pas la peine, allez donc voir notre formation sur React.
Ce sera votre meilleure décision de la journée. 😇