Code plus vite avec React grâce à ces techniques

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 />
}

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.

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.props

Quand 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.

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.

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.

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.

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. 😇