Le raccourci élégant du && pour un rendu simple

L'opérateur logique ET (`&&`) en JavaScript est bien connu pour son comportement de "court-circuit". Si l'expression à gauche de `&&` est évaluée comme "fausse" (falsy : `false`, `0`, `''`, `null`, `undefined`, `NaN`), JavaScript n'évalue même pas l'expression de droite et retourne directement la valeur de gauche. Si l'expression de gauche est "vraie" (truthy), alors l'expression de droite est évaluée et sa valeur est retournée. C'est ce comportement qui le rend particulièrement astucieux pour le rendu conditionnel en React.

Cette technique est idéale lorsque vous souhaitez afficher un élément JSX *uniquement si* une condition spécifique est remplie, et ne rien afficher dans le cas contraire. C'est une alternative très concise à l'opérateur ternaire où vous devriez explicitement retourner `null` dans la partie `else` (par exemple, `condition ? : null`). Avec `&&`, si la condition est fausse, l'expression retourne la valeur fausse de la condition (qui ne rend rien visuellement en React, sauf pour le cas de `0`), et si elle est vraie, elle retourne l'élément JSX que vous souhaitez afficher.

Comme l'opérateur ternaire, `&&` produit une expression et peut donc être directement intégré entre les accolades `{}` dans votre JSX. Cela permet d'écrire des conditions d'affichage simples de manière très compacte et lisible, directement là où le rendu doit se produire.

Mise en pratique de l'opérateur && en jsx

Imaginons que vous souhaitiez afficher le nombre de messages non lus dans une boîte de réception, mais seulement s'il y en a effectivement. L'opérateur `&&` est parfait pour cela.

Voici comment vous pourriez l'implémenter :

function Mailbox(props) {
  const unreadMessages = props.unreadMessages; // Supposons que c'est un tableau

  return (
    

      
Bonjour !
      {unreadMessages.length > 0 &&
        

          Vous avez {unreadMessages.length} message(s) non lu(s).
        
      }
      
Contenu principal de la boîte de réception...
    
  );
}

// Exemple d'utilisation :
const messages = ['React est génial', 'Apprenez le rendu conditionnel'];
//  
// Affichera : 
// 
Bonjour !
// 
Vous avez 2 message(s) non lu(s).
// 
Contenu principal de la boîte de réception...

//  
// Affichera seulement :
// 
Bonjour !
// 
Contenu principal de la boîte de réception...

Un autre cas courant est l'affichage d'un indicateur de chargement pendant qu'une donnée est récupérée :

function DataLoader({ isLoading, data }) {
  return (
    

      {isLoading && 
Chargement en cours...
}
      
      {/* On pourrait aussi utiliser !isLoading && data pour afficher les données */}
      {!isLoading && data && (
        

          {/* Mapper et afficher les éléments de 'data' ici */}
          
Donnée 1
          
Donnée 2
        
      )}
    
  );
}

//  // Affiche "Chargement en cours..."
//  // Affiche la liste

Attention toutefois à un piège potentiel : si l'expression à gauche de `&&` s'évalue à `0` (qui est *falsy* mais que React affiche littéralement), alors `0` sera rendu dans le DOM. Par exemple, `count && ` affichera `0` si `count` vaut `0`. Pour éviter cela, assurez-vous toujours que l'expression à gauche de `&&` s'évalue à un booléen (`true` ou `false`). Une conversion explicite est souvent préférable : `count > 0 && `.

En conclusion, l'opérateur `&&` est un outil extrêmement pratique et concis pour les scénarios de rendu conditionnel où un élément doit être affiché uniquement si une condition est vraie. Sa simplicité en fait un favori pour de nombreux développeurs React, à condition de garder à l'esprit le comportement spécifique avec la valeur `0`.