ES2020 Chaînage optionnel et React

Dans le package de nouveautés de la version 2020 de Javascript, on voit arriver le chaînage optionnel. Il s’agit, d’après la documentation officielle, d’un opérateur qui « permet de lire la valeur d'une propriété située profondément dans une chaîne d'objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide ». Tout un programme... Mais qu’est ce que ça nous apporte concrètement ?

Et bien voyons cela tout de suite avec un exemple !

Comprendre le nouvel opérateur de chaînage

Prenons un objet classique :

const obj = {id: 1, user: {firstname: 'Jean', lastname: 'Bon'}}

Si l’on veut récupérer la valeur de la propriété `firstname` de `user`, il suffit de faire la manipulation suivante :

obj.user.firstname

Maintenant, imaginons que la propriété user n’existe pas. Une erreur de ce type sera alors soulevée :

Uncaught TypeError: Cannot read property 'firstname' of null

Grâce au nouvel opérateur de chaînage optionnel on pourra gérer les cas où l'on ne sait pas si la valeur sera renseignée.

obj?.user.firstname

Dans ce cas, si la référence `user` est à `null` ou `undefined`, l’expression retournera `undefined`. On pourra aussi utiliser cet opérateur dans le cas d’appel aux fonctions.

obj.unavailableMethod?.()

Dans cet exemple le résultat retourné sera`undefined`

Utiliser l'opérateur de chaînage avec React

Appliquer à React l’opérateur de chaînage a pour but de simplifier l’écriture du code. Il est commun de passer en `props` un gestionnaire d’événement tel que `onClick` ou `onChange`. Cependant, il faut tester si cette props existe bien, sinon on s'expose à l'apparition d'une erreur.

function Button({onClick}){ const handleClick = () => { if (onClick) { onClick(); } // ou en version ternaire onClick && onClick(); }; return <button onClick={handleClick}>OK</button> }

Avec l'opérateur de chaînage, il sera possible de gérer ce type de cas beaucoup plus simplement :

function Button({onClick}){ const handleClick = () => onClick?.();
return <button onClick={handleClick}>OK</button> }

Et comme nous l'avons vu précédemment, on pourra appliquer cette technique sur des propriétés imbriquées d'objet :

function User(props){ const handleClick = () => props.onClick?.(); return <div onClick={handleClick}>{props.user?.firstname || 'Pas de prénom'}</div> }

Enfin, la bonne nouvelle c'est que cette fonctionnalité est disponible avec le plugin BabelJs !

Mais, le meilleur moyen de comprendre comment appliquer le chaînage optionnel à React c'est encore de plonger directement dans la technique et de mettre les mains dans le code ! ;)