Comment éviter le re-rendu inutile des composants React

Comprendre comment React Native rend les composants est essentiel pour créer des applications efficaces et performantes. Lorsque l'état ou les accessoires d'un composant changent, React met automatiquement à jour l'interface utilisateur (UI) pour refléter ces changements. En conséquence, React appelle à nouveau la méthode de rendu du composant pour générer la représentation mise à jour de l'interface utilisateur.

Dans cet article, nous explorerons trois React Hooks et comment ils empêchent les rendus inutiles dans React

• useMemo
• useCallback
• useRef

Ces outils nous permettent d'optimiser notre code en évitant les rendus inutiles, en améliorant les performances et en stockant efficacement les valeurs.

À la fin de cet article, nous comprendrons mieux comment rendre nos applications React plus rapides et plus réactives à l'aide de ces hooks React pratiques.

Utiliser useMemo de React

Dans React, useMemo peut éviter les rendus inutiles et optimiser les performances.

Explorons comment le hook useMemo peut empêcher les nouveaux rendus inutiles dans nos composants React.

En mémorisant le résultat d'une fonction et en suivant ses dépendances, useMemo garantit que le processus n'est recalculé que lorsque cela est nécessaire.

Considérons l'exemple suivant :

import { useMemo, useState } from 'react';

    function Page() {
      const [count, setCount] = useState(0);
      const [items] = useState(generateItems(300));

      const selectedItem = useMemo(() => items.find((item) => item.id === count), [
        count,
        items,
      ]);

      function generateItems(count) {
        const items = [];
        for (let i = 0; i < count; i++) {
          items.push({
            id: i,
            isSelected: i === count - 1,
          });
        }
        return items;
      }

      return (
        <div className="tutorial">
          <h1>Count: {count}</h1>
          <h1>Selected Item: {selectedItem?.id}</h1>
          <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
      );
    }

    export default Page;

Le code ci-dessus est un composant React appelé Page qui utilise useMemo pour optimiser le calcul de l'élément sélectionné.

Voici l'explication :

• Le composant maintient un nombre de variables d'état à l'aide du hook useState.
• L'état des éléments est initialisé à l'aide du hook useState avec le résultat de la fonction generateItems.
• Le selectedItem est calculé à l’aide de useMemo, qui mémorise le résultat de l’opération items.find. Il recalcule uniquement lorsque le nombre ou les éléments changent.
• La fonction generateItems génère un tableau d'éléments en fonction du nombre donné.
• Le composant affiche la valeur count actuelle, l'identifiant de l'élément sélectionné et un bouton pour incrémenter le nombre.

L'utilisation de useMemo optimise les performances en mémorisant le résultat de l'opération items.find. Il garantit que le calcul de selectedItem n'est effectué que lorsque les dépendances (nombre ou éléments) changent, évitant ainsi les recalculs inutiles lors des rendus ultérieurs.

La mémorisation doit être utilisée de manière sélective pour les opérations gourmandes en calcul, car elle introduit une surcharge supplémentaire dans le processus de rendu.

Utilisation de useCallback de React

Le hook useCallback dans React permet la mémorisation des fonctions, empêchant leur recréation lors du rendu de chaque composant. En utilisant useCallback. une pièce n'est créée qu'une seule fois et réutilisée dans les rendus ultérieurs tant que ses dépendances restent inchangées.

Considérons l'exemple suivant :

import React, { useState, useCallback, memo } from 'react';

    const allColors = ['red', 'green', 'blue', 'yellow', 'orange'];

    const shuffle = (array) => {
      const shuffledArray = [...array];
      for (let i = shuffledArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
      }
      return shuffledArray;
    };

    const Filter = memo(({ onChange }) => {
      console.log('Filter rendered!');

      return (
        <input
          type='text'
          placeholder='Filter colors...'
          onChange={(e) => onChange(e.target.value)}
        />
      );
    });

    function Page() {
      const [colors, setColors] = useState(allColors);
      console.log(colors[0])

      const handleFilter = useCallback((text) => {
        const filteredColors = allColors.filter((color) =>
          color.includes(text.toLowerCase())
        );
        setColors(filteredColors);
      }, [colors]);


      return (
        <div className='tutorial'>
        <div className='align-center mb-2 flex'>
          <button onClick={() => setColors(shuffle(allColors))}>
            Shuffle
          </button>
          <Filter onChange={handleFilter} />
        </div>
        <ul>
          {colors.map((color) => (
            <li key={color}>{color}</li>
          ))}
        </ul>
      </div>
      );
    }

    export default Page;

Le code ci-dessus démontre une fonctionnalité simple de filtrage et de brassage des couleurs dans un composant React. Passons en revue étape par étape :

• Le tableau initial de couleurs est défini comme allColors.
• La fonction shuffle prend un tableau et mélange ses éléments de manière aléatoire. Il utilise l'algorithme de Fisher-Yates pour réaliser le brassage.
• Le composant Filter est un composant fonctionnel mémorisé qui restitue un élément d'entrée. Il reçoit un accessoire onChange et déclenche la fonction de rappel lorsque la valeur d'entrée change.
• Le composant Page est le composant principal qui restitue la fonctionnalité de filtrage et de brassage des couleurs.
• Les couleurs des variables d'état sont initialisées à l'aide du hook useState, avec la valeur initiale définie sur allColors. Il représente la liste filtrée des couleurs.
• La fonction handleFilter est créée à l’aide du hook useCallback. Il prend un paramètre de texte et filtre le tableau allColors en fonction du texte fourni. Les couleurs filtrées sont ensuite définies à l'aide de la fonction setColors du hook useState. Le tableau de dépendances [colors] garantit que la fonction handleFilter n'est recréée que si l'état des couleurs change, optimisant ainsi les performances en évitant les nouveaux rendus inutiles.
• À l'intérieur du composant Page se trouve un bouton permettant de mélanger les couleurs. Lorsque le bouton clique, il appelle la fonction setColors avec le tableau mélangé de allColors.
• Le composant Filter est rendu avec la prop onChange définie sur la fonction handleFilter.
• Enfin, le tableau de couleurs est mappé pour afficher la liste des éléments de couleur comme
• éléments.

Le hook useCallback est utilisé pour mémoriser la fonction handleFilter, ce qui signifie que la fonction n'est créée qu'une seule fois et réutilisée lors des rendus suivants si les dépendances (dans ce cas, l'état des couleurs) restent les mêmes.

This optimization prevents unnecessary re-renders of child components that receive the handleFilter function as a prop, such as the Filter component.
It ensures that the Filter component is not re-rendered if the colors state hasn't changed, improving performance.

Using React's useRef

Another approach to enhance performance in React applications and avoid unnecessary re-renders is using the useRef hook. Using useRef, we can store a mutable value that persists across renders, effectively preventing unnecessary re-renders.

This technique allows us to maintain a reference to a value without triggering component updates when that value changes. By leveraging the mutability of the reference, we can optimize performance in specific scenarios.

Consider the following example:

import React, { useRef, useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        ref={inputRef}
      />
      <button onClick={handleClick}>Focus</button>
    </div>
  );
}

The example above has a simple input field and a button. The useRef hook creates a ref called inputRef. As soon as the button is clicked, the handleClick function is called, which focuses on the input element by accessing the current property of the inputRef ref object. As such, it prevents unnecessary rerendering of the component when the input value changes.

To ensure optimal use of useRef, reserve it solely for mutable values that do not impact the component's rendering. If a mutable value influences the component's rendering, it should be stored within its state instead.

Conclusion

Throughout this tutorial, we explored the concept of React re-rendering and its potential impact on the performance of our applications. We delved into the optimization techniques that can help mitigate unnecessary re-renders. React offers a variety of hooks that enable us to enhance the performance of our applications. We can effectively store values and functions between renders by leveraging these hooks, significantly boosting React application performance.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!