Props par défaut (Default Props)

Pourquoi définir des valeurs par défaut ?

Lorsque vous créez des composants réutilisables, il est fréquent que certaines props ne soient pas systématiquement fournies par le composant parent. Si votre composant s'attend à recevoir une prop particulière pour fonctionner correctement ou pour afficher une valeur spécifique, l'absence de cette prop pourrait entraîner des erreurs (par exemple, essayer d'accéder à une propriété de `undefined`) ou un comportement inattendu.

Pour pallier cela et rendre vos composants plus robustes et flexibles, React vous permet de définir des valeurs par défaut pour les props. Si un composant parent n'envoie pas une prop spécifique, le composant enfant utilisera automatiquement la valeur par défaut que vous avez définie. Cela garantit que le composant dispose toujours d'une valeur valide avec laquelle travailler, même si la prop est omise par le parent.

L'utilisation de props par défaut rend également l'utilisation de votre composant plus simple, car certaines props deviennent effectivement optionnelles pour le composant parent.

Définition pour les Composants Fonctionnels

Pour les composants fonctionnels, il existe deux manières principales de définir des props par défaut :

1. Avec les paramètres par défaut ES6 (Approche moderne et recommandée) : C'est la méthode la plus simple et la plus idiomatique aujourd'hui. Lorsque vous déstructurez l'objet `props` dans la signature de votre fonction, vous pouvez directement assigner une valeur par défaut à chaque prop.

// Utilisation des paramètres par défaut ES6 lors de la déstructuration
function BoutonFonctionnel({ 
  texte = "Cliquez-moi", // Valeur par défaut pour 'texte'
  couleur = "blue",      // Valeur par défaut pour 'couleur'
  onClick 
}) {
  const styleBouton = {
    backgroundColor: couleur,
    color: 'white',
    padding: '10px 15px',
    border: 'none',
    borderRadius: '4px'
  };

  return (
    
      {texte}
    
  );
}

// Utilisation :
//  // Utilisera texte='Cliquez-moi' et couleur='blue'
//  // Utilisera couleur='blue'
//  // Utilisera texte='Cliquez-moi'

2. Avec la propriété statique `defaultProps` (Approche historique) : Avant les paramètres par défaut ES6 et les Hooks, c'était la manière standard. Vous attachiez une propriété statique `defaultProps` à votre fonction composant. Cette méthode fonctionne toujours mais est moins courante aujourd'hui pour les composants fonctionnels.

function BoutonFonctionnelAncien(props) {
  const { texte, couleur, onClick } = props;
  // ... même logique de style et return que ci-dessus
}

// Définition des props par défaut en dehors de la fonction
BoutonFonctionnelAncien.defaultProps = {
  texte: "Cliquez-moi",
  couleur: "blue"
};

L'approche avec les paramètres par défaut ES6 est généralement préférée car elle est plus concise et colocalise la définition de la prop et sa valeur par défaut.

Définition pour les Composants Classe

Pour les composants classe, la seule manière de définir des props par défaut est d'utiliser la propriété statique `defaultProps` sur la classe elle-même. C'est une convention reconnue par React.

import React from 'react';

class BoutonClasse extends React.Component {
  render() {
    // Déstructuration de this.props pour la clarté
    const { texte, couleur, onClick } = this.props;

    const styleBouton = {
      backgroundColor: couleur,
      color: 'white',
      padding: '10px 15px',
      border: 'none',
      borderRadius: '4px'
    };

    return (
      
        {texte}
      
    );
  }
}

// Définition des props par défaut comme propriété statique de la classe
BoutonClasse.defaultProps = {
  texte: "Action par défaut",
  couleur: "gray"
}; 

export default BoutonClasse;

// Utilisation :
//  // Utilisera texte='Action par défaut' et couleur='gray'

Cette syntaxe est essentielle à connaître pour travailler avec des bases de code contenant des composants classe.

Comment fonctionnent les `defaultProps` : Précédence et `undefined`

Il est important de comprendre quand la valeur par défaut est appliquée. React utilisera la valeur `defaultProps` pour une prop donnée uniquement si cette prop est strictement `undefined` dans l'objet `props` reçu du parent. Cela signifie que si le parent passe explicitement `null`, `false`, `0` ou une chaîne vide `''`, ces valeurs seront utilisées et la valeur par défaut sera ignorée.

function ExemplePrecedence({ valeur = 100 }) {
  return 
Valeur : {valeur === null ? 'NULL' : valeur}
;
}

//                  --> Affiche "Valeur : 100" (valeur est undefined, default est utilisé)
//       --> Affiche "Valeur : 50"
//  --> Affiche "Valeur : 100" (undefined explicite, default est utilisé)
//       --> Affiche "Valeur : NULL" (null n'est pas undefined, default est ignoré)
//          --> Affiche "Valeur : 0" (0 n'est pas undefined, default est ignoré)

La précédence est donc la suivante : Valeur de prop explicitement passée (même `null`) > Valeur `defaultProps` (utilisée seulement si la prop passée est `undefined`).

Conclusion : Des composants plus résilients

Les props par défaut sont un outil simple mais puissant pour améliorer la robustesse et la flexibilité de vos composants React. En fournissant des valeurs de secours pour les props potentiellement manquantes, vous évitez des erreurs, rendez vos composants plus prévisibles et simplifiez leur utilisation par les composants parents.

Que vous utilisiez les paramètres par défaut ES6 dans les composants fonctionnels (méthode recommandée) ou la propriété statique `defaultProps` (pour les classes ou par compatibilité), intégrer cette pratique dans votre développement contribuera à créer des composants de meilleure qualité.