Renvoyer `null` pour ne rien afficher

Le pouvoir du vide : rendre l'invisible en react

Dans le développement d'interfaces utilisateur avec React, il arrive fréquemment que l'on souhaite qu'un composant ne produise absolument aucun rendu visuel sous certaines conditions. Plutôt que de retourner un élément vide ou un fragment qui pourrait quand même laisser une trace minimale dans l'arbre React, la bibliothèque offre une solution explicite et propre : retourner `null`.

Lorsqu'un composant React retourne `null` depuis sa fonction (pour un composant fonctionnel) ou sa méthode `render` (pour un composant classe), React comprend qu'il ne doit rien afficher dans le DOM pour ce composant lors de ce cycle de rendu particulier. C'est un moyen direct de 'masquer' un composant sans avoir à recourir à des astuces CSS ou à des structures JSX vides.

Cette technique est particulièrement utile en conjonction avec les logiques de rendu conditionnel que nous avons explorées précédemment. Que ce soit via une instruction `if` ou un opérateur ternaire, retourner `null` est la façon idiomatique en React de signifier "ne rien faire, ne rien afficher" pour ce composant dans la situation actuelle.

Implémenter l'absence : `null` en action

Le cas d'usage le plus courant pour retourner `null` est de conditionner l'affichage complet d'un composant en fonction d'une prop ou d'un état. Imaginons un composant `WarningBanner` qui ne doit s'afficher que si une prop `warn` est vraie :

function WarningBanner(props) {
  // Si la prop 'warn' est fausse (ou absente et donc undefined), on ne rend rien.
  if (!props.warn) {
    return null; 
  }

  // Sinon, on affiche le bandeau d'avertissement.
  return (
    

      Attention ! Risque potentiel détecté.
    
  );
}

// Utilisation :
//   // Le bandeau s'affiche.
//  // Rien n'est rendu dans le DOM à cet endroit.
//              // Rien n'est rendu non plus (props.warn est undefined).

On peut également utiliser `null` dans un opérateur ternaire, bien que l'opérateur `&&` soit souvent plus concis pour ce cas précis (afficher ou ne rien afficher). Cependant, pour la clarté ou si la logique est légèrement différente, le ternaire avec `null` reste une option valide :

function UserSpecificFeature({ userType }) {
  return (
    

      
Contenu visible par tous.
      { 
        userType === 'premium'
          ?   // Affiche le composant premium
          : null                 // N'affiche rien pour les autres types d'utilisateurs
      }
    
  );
}

// 
// 

Il est important de noter que retourner `null` affecte également le cycle de vie du composant (ou l'exécution des Hooks comme `useEffect` qui dépendent du rendu). Si un composant retourne `null`, les étapes suivantes du rendu et les effets associés à ce rendu spécifique ne seront pas exécutés, ce qui peut être bénéfique pour les performances en évitant des calculs ou des effets inutiles.