Techniques d'optimisation pour les composants React

Dans ce cours, nous allons explorer différentes techniques d'optimisation pour améliorer les performances des composants React. Nous aborderons des sujets tels que l'utilisation de useMemo et useCallback, les clés (keys), le chargement progressif, le rendu conditionnel des composants, la centralisation des méthodes CRUD dans un fichier utils/function.js, ainsi que la transmission des props à un composant à l'aide d'un appel à une API. Ces techniques vous aideront à optimiser vos composants et à améliorer l'expérience utilisateur.

Utilisation de useMemo et useCallback

La fonction useMemo permet de mémoriser une valeur calculée entre les rendus successifs d'un composant. Cela permet d'éviter de recalculer la valeur à chaque rendu, ce qui peut être coûteux en termes de performances. Voici un exemple d'utilisation de useMemo :

import React, { useMemo } from 'react'
 
const ExpensiveComponent = ({ data }) => {
    const expensiveValue = useMemo(() => {
        // Effectuer des calculs coûteux
        return performExpensiveCalculation(data)
    }, [data])
 
    return <div>{expensiveValue}</div>
}

Dans cet exemple, la valeur expensiveValue est calculée en utilisant useMemo avec une fonction de calcul. La valeur calculée sera mémorisée entre les rendus tant que la dépendance data ne change pas.

De manière similaire, la fonction useCallback permet de mémoriser une fonction entre les rendus successifs d'un composant. Cela évite de recréer la fonction à chaque rendu, ce qui peut avoir un impact sur les performances. Voici un exemple d'utilisation de useCallback :

import React, { useCallback } from 'react'
 
const handleClick = useCallback(() => {
    // Logique de gestion du clic
}, [])
 
const Button = () => {
    return <button onClick={handleClick}>Cliquez ici</button>
}

Dans cet exemple, la fonction handleClick est mémorisée à l'aide de useCallback. La fonction ne sera recréée que si les dépendances spécifiées (dans ce cas, une liste vide []) changent.

Utilisation des clés (keys)

L'utilisation de clés (keys) est importante lors du rendu de listes de composants. Les clés aident React à identifier les éléments de la liste et à effectuer des mises à jour plus efficaces. Il est recommandé d'utiliser des clés uniques et stables pour chaque élément de la liste. Voici un exemple d'utilisation des clés :

const MyListComponent = ({ items }) => {
    return (
        <ul>
            {items.map((item) => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    )
}

Dans cet exemple, nous utilisons la propriété key pour attribuer une clé unique à chaque élément de la liste. Cela permet à React de mettre à jour uniquement les éléments qui ont changé, plutôt que de re-render toute la liste.

Utilisation du chargement progressif pour afficher les données

Lors du chargement de grandes quantités de données, il est recommandé d'utiliser le chargement progressif (lazy loading) pour améliorer les performances en évitant de charger toutes les données simultanément. Voici un exemple d'utilisation du chargement progressif avec React Suspense :

import React, { lazy, Suspense } from 'react'
 
const LazyComponent = lazy(() => import('./LazyComponent'))
 
const MyComponent = () => {
    return (
        <Suspense fallback={<div>Chargement...</div>}>
            <LazyComponent />
        </Suspense>
    )
}

Dans cet exemple, nous utilisons la fonction lazy pour importer dynamiquement le composant LazyComponent. L'enveloppe <Suspense> définit un fallback (élément de secours) qui est affiché pendant le chargement du composant. Une fois que le composant est chargé, il est rendu.

Rendu conditionnel de composant

Le rendu conditionnel de composants permet d'éviter les rendus inutiles lorsque les conditions ne sont pas remplies. Cela améliore les performances en évitant de mettre à jour ou de re-rendre des composants qui ne doivent pas être affichés. Voici un exemple d'utilisation du rendu conditionnel :

const MyComponent = ({ isLoggedIn }) => {
    return (
        <div>
            {isLoggedIn && <AuthenticatedComponent />}
            {!isLoggedIn && <LoginComponent />}
        </div>
    )
}

Dans cet exemple, nous utilisons des expressions conditionnelles pour afficher soit le composant AuthenticatedComponent si l'utilisateur est connecté, soit le composant LoginComponent si l'utilisateur n'est pas connecté. Seul le composant approprié sera rendu en fonction de la condition.

Centraliser les méthodes CRUD dans un seul fichier utils/function.js

Pour améliorer la maintenabilité et la réutilisabilité du code, il est courant de centraliser les méthodes CRUD (CREATE, READ, UPDATE, DELETE) dans un seul fichier, généralement appelé utils/function.js. Cela permet de réduire la duplication de code et de faciliter la gestion des appels API dans différentes parties de l'application. Voici un exemple de centralisation des méthodes CRUD :

// utils/functions.js
 
export const createItem = async (data) => {
  // Logique de création
};
 
export const getItemById = async (id) => {
  // Logique de récupération d'un élément par ID
};
 
export const updateItem = async
 
(id, data) => {
  // Logique de mise à jour
};
 
export const deleteItem = async (id) => {
  // Logique de suppression
};

Dans cet exemple, nous avons centralisé les méthodes CRUD dans un fichier utils/functions.js. Chaque méthode effectue des opérations spécifiques (création, récupération par ID, mise à jour, suppression) sur les données. Ces méthodes peuvent être importées et utilisées dans différents composants de l'application.

Passage de props à un composant avec un appel à une API

Lors de l'appel à une API pour récupérer des données à transmettre à un composant, il est courant de passer ces données en tant que props. Voici un exemple de passage de props à un composant à l'aide d'un appel à une API :

import React, { useState, useEffect } from 'react'
import { getItemById } from './utils/functions'
 
const ItemDetails = ({ itemId }) => {
    const [item, setItem] = useState(null)
 
    useEffect(() => {
        const fetchItem = async () => {
            const itemData = await getItemById(itemId)
            setItem(itemData)
        }
 
        fetchItem()
    }, [itemId])
 
    return (
        <div>
            {item ? (
                <div>
                    <h1>{item.title}</h1>
                    <p>{item.description}</p>
                </div>
            ) : (
                <div>Chargement...</div>
            )}
        </div>
    )
}
 
export default ItemDetails

Dans cet exemple, nous utilisons getItemById pour récupérer les données de l'élément spécifié par itemId à partir d'une API. Les données sont stockées dans l'état du composant à l'aide du hook useState et affichées dans le rendu. Pendant le chargement des données, un message "Chargement..." est affiché.

Conclusion

Dans ce cours, nous avons examiné différentes techniques d'optimisation pour les composants React. Nous avons exploré l'utilisation de useMemo et useCallback pour mémoriser des valeurs calculées et des fonctions entre les rendus. Nous avons également abordé l'utilisation des clés (keys) pour optimiser le rendu des listes, le chargement progressif pour améliorer les performances lors du chargement de grandes quantités de données, le rendu conditionnel pour éviter les rendus inutiles, la centralisation des méthodes CRUD dans un fichier utils/function.js, ainsi que le passage de props à un composant à l'aide d'un appel à une API. Ces techniques vous aideront à optimiser vos composants React et à créer des applications performantes. Continuez à pratiquer et à explorer de nouvelles astuces pour améliorer votre expertise en JavaScript et ReactJs !