L'une des clés de la création d'applications React performantes est d'éviter les nouveaux rendus inutiles. Le moteur de rendu de React est efficace, mais il reste crucial d'empêcher les nouveaux rendus là où ils ne sont pas nécessaires. Dans cet article, nous aborderons les erreurs courantes et comment les éviter.

1. Mémoire des composants à l'aide de React.memo

La mémorisation vous aide à ignorer les nouveaux rendus lorsque les accessoires du composant n'ont pas changé. Cependant, il est facile d'utiliser React.memo à mauvais escient en n'implémentant pas de fonction de comparaison personnalisée.

Utilisation incorrecte :

const MemoizedComponent = React.memo(MyComponent);

Cela vérifie uniquement si la référence des accessoires a changé, ce qui n'est pas toujours suffisant.

Utilisation correcte :

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.itemId === nextProps.itemId;
});

Ici, nous utilisons une fonction de comparaison personnalisée qui déclenche un nouveau rendu uniquement lorsque le prop itemId change.

2. Évitez l'utilisation excessive des fonctions en ligne

L'utilisation de fonctions en ligne dans JSX peut entraîner des rendus inutiles, car React traite une nouvelle fonction comme un nouvel accessoire à chaque rendu.

Utilisation incorrecte :

function ButtonComponent() {
  return  handleClick()}>Click me;
}

Cela provoque la recréation de handleClick à chaque rendu, ce qui entraîne des rendus inutiles.

Utilisation correcte :

import { useCallback } from 'react';

function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);

  return Click me;
}

En utilisant useCallback, nous mémorisons la fonction handleClick, évitant ainsi toute recréation inutile à chaque rendu.

3. Exploiter PureComponent

Lorsque vous travaillez avec des composants de classe, l'utilisation de React.PureComponent garantit que le composant n'est restitué que si ses accessoires ou son état changent. Si vous utilisez React.Component, cela peut entraîner des rendus inutiles.

Utilisation incorrecte :

class CardComponent extends React.Component {
  // Component logic
}

Utilisation correcte :

class CardComponent extends React.PureComponent {
  // Component logic
}

En étendant React.PureComponent, React comparera superficiellement les accessoires et l'état, évitant ainsi les nouveaux rendus inutiles.

4. Optimisation de useSelector dans les composants fonctionnels

Lors de l'utilisation de useSelector depuis React-redux, il est important de sélectionner uniquement la tranche nécessaire de l'état.

Utilisation incorrecte :

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const globalState = useSelector((state) => state);
  // Render logic
};

Cela entraînera un nouveau rendu du composant chaque fois qu'une partie de l'état change.

Utilisation correcte :

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const selectedData = useSelector((state) => state.specificSlice);
  // Render logic based on specific slice
};

En sélectionnant uniquement la partie nécessaire de l'état, vous minimisez les nouveaux rendus.

5. Implémentation de ShouldComponentUpdate dans les composants de classe

Pour les composants de classe qui n'étendent pas PureComponent, l'implémentation manuelle de ShouldComponentUpdate permet un contrôle plus granulaire sur le moment où le composant est restitué.

Utilisation incorrecte :

class ListItem extends React.Component {
  // Component logic
}

Ceci sera restitué à chaque rendu du composant parent, même si les accessoires et l'état n'ont pas changé.

Utilisation correcte :

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value;
  }

  // Component logic
}

En personnalisant ShouldComponentUpdate, nous garantissons que le composant n'est restitué que lorsque la prop itemId ou l'état de la valeur change.

Conclusion

En employant ces techniques, vous pouvez réduire considérablement les rendus inutiles dans vos applications React, conduisant ainsi à de meilleures performances. La mise en œuvre de la mémorisation avec React.memo, l'exploitation de PureComponent et le réglage fin de ShouldComponentUpdate sont des stratégies clés pour optimiser vos composants React.

Comprendre quand et comment optimiser le rendu peut améliorer considérablement l'expérience utilisateur en fournissant des applications plus rapides et plus réactives.

Références :

1. GeekspourGeeks. (2023). Qu’est-ce que la mémorisation dans React ?
2. Syncfusion. (2024). Mémisation dans React
3. Hygraphe. (2024). Qu'est-ce que React Memo et comment l'utiliser ?
4. Affiner.dev. (2024). Guide de mémo React avec des exemples

Si vous avez trouvé ce guide utile, pensez à le partager avec d'autres ! ?

Ce blog fournit un aperçu mis à jour et complet des moyens d'éviter les rendus inutiles dans les applications React tout en intégrant les meilleures pratiques et en modifiant les noms de variables pour plus de clarté et de pertinence dans les pratiques de développement Web modernes.

Citations :
[1] https://www.geeksforgeeks.org/what-is-memoization-in-react/
[2] https://stackoverflow.com/questions/74013864/why-arent-all-react-components-wrapped-with-react-memo-by-default
[3] https://www.syncfusion.com/blogs/post/what-is-memoization-in-react
[4] https://hygraph.com/blog/react-memo
[5] https://refine.dev/blog/react-memo-guide/
[6] https://dmitripavlutin.com/use-react-memo-wisely/
[7] https://www.topcoder.com/thrive/articles/memoization-in-react-js
[8] https://react.dev/reference/react/memo