Quand on développe des applications web avec React, il faut s’assurer que les composants se comportent de manière prévisible et performante. L’un des concepts clés pour y parvenir est celui des composants purs. Que signifie « composant pur », et pourquoi cela est si important ? Avec cet article, nous allons expliquer ce concept, comparer des exemples de composants purs et non purs, et finalement s’intéresser aux tests unitaires qui garantissent la pureté des composants.

Qu’est-ce qu’un composant pur ?

Un composant pur est un composant qui génère toujours le même résultat pour des entrées et un état donné. Le rendu d’un composant dépend seulement de ses entrées et est totalement déterminé par celles-ci. Si les entrées et l’état ne changent pas, le composant rendra toujours le même résultat, peu importe le nombre d’appels.

Les composants purs sont plus faciles à tester, plus performants et ont moins d’effets secondaires indésirables. Avec React, il est possible de créer un composant pur en utilisant la classe React.PureComponent ou en écrivant un composant fonctionnel qui n’introduit pas d’effets secondaires.

Composants non purs

Un composant non pur peut avoir des effets secondaires ou un comportement qui dépend de facteurs autres que ses entrées et son état.: Il peut s’agir par exemple de variables globales, d’états internes non contrôlés, ou d’appels à des API qui modifient le rendu de manière imprévisible. Ces composants sont difficiles voir impossible à tester et à debuguer, car leur sortie ne dépend pas toujours de leurs entrées et état.

Voici un exemple simple de composant non pur :

import React from 'react';

export default function VisitCounter({ count }) {
  
  if (count <= 10 ) {
    document.getElementById('counter').className = 'red';
  } else {
    document.getElementById('counter').className = 'green';
  }

  return (
    

      Number of visits: {count}
    
  );
}

Dans cet exemple, le changement de la classe introduit un effet secondaire qui peut rendre le comportement du composant imprévisible, ce qui complique les tests.

Composants purs : exemple

import React from 'react';

export default function VisitCounter({ count }) {
 
  let className;

  if (count <= 10) {
    className = 'red';
  } else {
    className = 'green';
  }

  return (
    

      Number of visits: {count}
    
  );
}

export default React.memo(VisitCounter);

Ici, le composant VisitCounter dépend de l’entrée « count » et l’affiche dans une balise « h1 ». On utilise React.memo pour optimiser ce composant et éviter des re-rendus inutiles si la propriété en entrée ne change pas.

Pourquoi utiliser des composants purs ?

Utiliser des composants purs présente plusieurs avantages :

• Prévisibilité : un composant pur est facile à comprendre et à tester. Son comportement ne dépend pas d’effets secondaires ou de dépendances externes.
• Optimisation des performances : React peut optimiser le rendu des composants purs en évitant les re-rendus inutiles grâce à la comparaison des propriétés en entrée. Il faut utiliser React.PureComponent ou React.memo.
• Facilité des tests unitaires : tester des composants purs est plus simple, car leur sortie dépend uniquement de leurs entrées. Cela permet de rédiger des tests plus ciblés et fiables.

Exemple de test unitaire

Voici un exemple de test unitaire pour vérifier le comportement des composants purs.

Tester un composant pur comme VisitCounter est simple. Vérifions que l’entrée est bien rendue dans le retour du composant.

import React from 'react';
import { render, screen } from '@testing-library/react';
import { VisitCounter } from './VisitCounter';

describe(' test', () => {
  test('renders correctly', () => {
    render();
    expect(screen.getByText('Number of visits: 0')).toBeInTheDocument();
    const counter = screen.getByTestId('counter'); 
    expect(counter).toHaveClass('red');
  });
});

Conclusion

Les composants purs offrent de nombreux avantages, qui sont principalement la prévisibilité et la performance. En évitant les effets secondaires, nous créons des composants plus robustes, plus simples et plus faciles à tester. En suivant les bonnes pratiques et en utilisant les classes et méthodes adaptées (React.memo ou React.PureComponent), nous améliorons la qualité de notre code React et améliorons l’expérience utilisateur.

Et vous, vos composants React sont-ils purs ?