Composants purs dans React : comment ils fonctionnent et quand les utiliser

Les composants purs dans React sont essentiellement liés à la performance. Ils aident votre application à éviter les re-rendus inutiles en vérifiant si les entrées du composant (props ou state) ont réellement changé. Dans cet article, nous examinerons comment fonctionnent les composants purs, comment les utiliser et quand ils sont utiles — avec des exemples clairs et modernes.

Qu’est-ce qu’un composant pur ?

Un composant pur est un composant qui ne se re-rend que lorsque ses props ou son state ont changé. React détermine s’il doit effectuer un re-rendu en faisant une comparaison superficielle des props/state actuels avec les précédents.

Utilisation de React.PureComponent

React.PureComponent est l’équivalent pour les composants de classe d’une fonction pure. Il implémente une méthode shouldComponentUpdate() intégrée qui effectue une comparaison superficielle.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Si this.props.text n’a pas changé, le composant ne se re-rendra pas.

Alternative fonctionnelle : React.memo

Pour les composants fonctionnels, utilisez React.memo().

const MyComponent = React.memo(function MyComponent({ text }) {
  return <div>{text}</div>;
});

React ignorera le rendu si text est identique à celui du rendu précédent.

Comment fonctionne la comparaison superficielle

Une comparaison superficielle signifie :

• Les valeurs primitives (comme les nombres ou les chaînes) sont comparées par valeur
• Les objets et les tableaux sont comparés par référence

{ a: 1 } === { a: 1 } // false
const obj = { a: 1 }
obj === obj // true

Donc, si vous passez un objet qui est muté au lieu d’être recréé, un composant pur pourrait ne pas remarquer le changement.

Exemple concret

Sans optimisation

const Item = ({ data }) => <div>{data.label}</div>;

Cela se re-rendra chaque fois que le parent se re-rend, même si data n’a pas changé.

Avec React.memo

const Item = React.memo(({ data }) => <div>{data.label}</div>);

Maintenant, le composant ne se re-rend que lorsque data est un nouvel objet.

Quand utiliser PureComponent ou memo

• Vous affichez des listes avec de nombreux éléments
• Les props du composant restent stables entre les rendus
• Vous souhaitez réduire les cycles de rendu dans les parties sensibles à la performance de votre application
• Vous utilisez useCallback ou useMemo pour préserver les références

Pièges courants

• La comparaison superficielle ne détecte pas les changements profonds (objets/tableaux imbriqués)
• Ne l’utilisez pas à moins d’être sûr que les props ne mutent pas silencieusement
• Peut introduire des bugs si vous passez des références instables

React.memo vs React.PureComponent

Fonctionnalité React.PureComponent React.memo Type de composant Composant de classe Composant fonctionnel Logique de comparaison Props + state (superficielle) Props uniquement (superficielle) Fonction de comparaison personnalisée ❌ ✅ React.memo(fn) Utilisation moderne Moins courant Largement utilisé

Conclusion

Les composants purs peuvent aider React à ignorer les re-rendus et maintenir votre interface utilisateur performante — mais ce n’est pas une solution miracle. Préférez React.memo pour les composants fonctionnels, et comprenez que la comparaison superficielle signifie que les références sont importantes. Utilisez-les lorsque la performance est importante et que les props sont stables.

FAQ