Dépendances des Hooks Personnalisés React : Maîtriser l'Optimisation des Effets pour la Performance

Les hooks personnalisés React sont un outil puissant pour abstraire et réutiliser la logique dans vos composants. Cependant, une gestion incorrecte des dépendances dans `useEffect` peut entraîner des problèmes de performances, des rendus inutiles, et même des boucles infinies. Ce guide offre une compréhension complète des dépendances `useEffect` et des meilleures pratiques pour optimiser vos hooks personnalisés.

Comprendre useEffect et les Dépendances

Le hook `useEffect` dans React vous permet d'effectuer des effets secondaires dans vos composants, tels que la récupération de données, la manipulation du DOM ou la configuration d'abonnements. Le deuxième argument de `useEffect` est un tableau optionnel de dépendances. Ce tableau indique à React quand l'effet doit être réexécuté. Si l'une des valeurs du tableau de dépendances change entre les rendus, l'effet sera réexécuté. Si le tableau de dépendances est vide (`[]`), l'effet ne s'exécutera qu'une seule fois après le rendu initial. Si le tableau de dépendances est omis, l'effet s'exécutera après chaque rendu.

Pourquoi les Dépendances sont Importantes

Les dépendances sont cruciales pour contrôler le moment où votre effet s'exécute. Si vous incluez une dépendance qui n'a pas réellement besoin de déclencher l'effet, vous vous retrouverez avec des réexécutions inutiles, ce qui pourrait avoir un impact sur les performances. Inversement, si vous omettez une dépendance qui *doit* déclencher l'effet, votre composant pourrait ne pas se mettre à jour correctement, ce qui entraînerait des bugs et un comportement inattendu. Examinons un exemple de base :

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

function ExampleComponent({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      setUserData(data);
    }

    fetchData();
  }, [userId]); // Tableau de dépendances : ne se réexécute que lorsque userId change

  if (!userData) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>{userData.name}</h1>
      <p>{userData.email}</p>
    </div>
  );
}

export default ExampleComponent;

            

              
                Copy
              
            
          

Dans cet exemple, l'effet récupère les données utilisateur à partir d'une API. Le tableau de dépendances inclut `userId`. Cela garantit que l'effet ne s'exécute que lorsque la prop `userId` change. Si `userId` reste le même, l'effet ne se réexécutera pas, ce qui évitera les appels API inutiles.

Pièges Courants et Comment les Éviter

Plusieurs pièges courants peuvent survenir lorsque vous travaillez avec les dépendances `useEffect`. Comprendre ces pièges et comment les éviter est essentiel pour écrire du code React efficace et sans bug.

1. Dépendances Manquantes

L'erreur la plus courante consiste à omettre une dépendance qui *devrait* être incluse dans le tableau de dépendances. Cela peut entraîner des fermetures obsolètes et un comportement inattendu. Par exemple :

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1); // Problème potentiel : `count` n'est pas une dépendance
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Tableau de dépendances vide : l'effet ne s'exécute qu'une seule fois

  return <p>Count: {count}</p>;
}

export default Counter;

            

              
                Copy
              
            
          

Dans cet exemple, la variable `count` n'est pas incluse dans le tableau de dépendances. Par conséquent, le callback `setInterval` utilise toujours la valeur initiale de `count` (qui est 0). Le compteur ne s'incrémentera pas correctement. La version correcte devrait inclure `count` dans le tableau de dépendances :

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1); // Correct : utiliser la mise à jour fonctionnelle
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Maintenant, aucune dépendance n'est nécessaire puisque nous utilisons la forme de mise à jour fonctionnelle.

  return <p>Count: {count}</p>;
}

export default Counter;

            

              
                Copy
              
            
          

Leçon Apprise : Assurez-vous toujours que toutes les variables utilisées à l'intérieur de l'effet qui sont définies en dehors de la portée de l'effet sont incluses dans le tableau de dépendances. Si possible, utilisez les mises à jour fonctionnelles (`setCount(prevCount => prevCount + 1)`) pour éviter d'avoir besoin de la dépendance `count`.

2. Inclure des Dépendances Inutiles

Inclure des dépendances inutiles peut entraîner des rendus excessifs et une dégradation des performances. Par exemple, considérez un composant qui reçoit une prop qui est un objet :

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

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Effectuer un traitement de données complexe
    const result = processData(data);
    setProcessedData(result);
  }, [data]); // Problème : `data` est un objet, donc il change à chaque rendu

  function processData(data) {
    // Logique de traitement de données complexe
    return data;
  }

  if (!processedData) {
    return <p>Loading...</p>;
  }

  return <p>{processedData.value}</p>;
}

export default DisplayData;

            

              
                Copy
              
            
          

Dans ce cas, même si le contenu de l'objet `data` reste logiquement le même, un nouvel objet est créé à chaque rendu du composant parent. Cela signifie que `useEffect` se réexécutera à chaque rendu, même si le traitement des données n'a pas réellement besoin d'être refait. Voici quelques stratégies pour résoudre ce problème :

Solution 1 : Mémorisation avec `useMemo`

Utilisez `useMemo` pour mémoriser la prop `data`. Cela ne recréera l'objet `data` que si ses propriétés pertinentes changent.

            
import React, { useState, useEffect, useMemo } from 'react';

function ParentComponent() {
  const [value, setValue] = useState(0);

  // Mémoriser l'objet `data`
  const data = useMemo(() => ({ value }), [value]);

  return <DisplayData data={data} />;
}

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Effectuer un traitement de données complexe
    const result = processData(data);
    setProcessedData(result);
  }, [data]); // Maintenant, `data` ne change que lorsque `value` change

  function processData(data) {
    // Logique de traitement de données complexe
    return data;
  }

  if (!processedData) {
    return <p>Loading...</p>;
  }

  return <p>{processedData.value}</p>;
}

export default ParentComponent;

            

              
                Copy
              
            
          

Solution 2 : Déstructurer la Prop

Passez les propriétés individuelles de l'objet `data` en tant que props au lieu de l'objet entier. Cela permet à `useEffect` de ne se réexécuter que lorsque les propriétés spécifiques dont il dépend changent.

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

function ParentComponent() {
  const [value, setValue] = useState(0);

  return <DisplayData value={value} />; // Passer `value` directement
}

function DisplayData({ value }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Effectuer un traitement de données complexe
    const result = processData(value);
    setProcessedData(result);
  }, [value]); // Ne se réexécute que lorsque `value` change

  function processData(value) {
    // Logique de traitement de données complexe
    return { value }; // Envelopper dans un objet si nécessaire à l'intérieur de DisplayData
  }

  if (!processedData) {
    return <p>Loading...</p>;
  }

  return <p>{processedData.value}</p>;
}

export default ParentComponent;

            

              
                Copy
              
            
          

Solution 3 : Utiliser `useRef` pour Comparer les Valeurs

Si vous devez comparer le *contenu* de l'objet `data` et ne réexécuter l'effet que lorsque le contenu change, vous pouvez utiliser `useRef` pour stocker la valeur précédente de `data` et effectuer une comparaison approfondie.

            
import React, { useState, useEffect, useRef } from 'react';
import { isEqual } from 'lodash'; // Nécessite la bibliothèque lodash (npm install lodash)

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);
  const previousData = useRef(data);

  useEffect(() => {
    if (!isEqual(data, previousData.current)) {
      // Effectuer un traitement de données complexe
      const result = processData(data);
      setProcessedData(result);
      previousData.current = data;
    }
  }, [data]); // `data` est toujours dans le tableau de dépendances, mais nous vérifions l'égalité profonde

  function processData(data) {
    // Logique de traitement de données complexe
    return data;
  }

  if (!processedData) {
    return <p>Loading...</p>;
  }

  return <p>{processedData.value}</p>;
}

export default DisplayData;

            

              
                Copy
              
            
          

Remarque : Les comparaisons approfondies peuvent être coûteuses, alors utilisez cette approche avec discernement. De plus, cet exemple repose sur la bibliothèque `lodash`. Vous pouvez l'installer en utilisant `npm install lodash` ou `yarn add lodash`.

Leçon Apprise : Réfléchissez soigneusement aux dépendances qui sont vraiment nécessaires. Évitez d'inclure des objets ou des tableaux qui sont recréés à chaque rendu si leur contenu reste logiquement le même. Utilisez la mémorisation, la déstructuration ou des techniques de comparaison approfondie pour optimiser les performances.

3. Boucles Infinies

Une gestion incorrecte des dépendances peut entraîner des boucles infinies, où le hook `useEffect` se réexécute continuellement, ce qui provoque le blocage ou le plantage de votre composant. Cela se produit souvent lorsque l'effet met à jour une variable d'état qui est également une dépendance de l'effet. Par exemple :

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

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Récupérer des données à partir d'une API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result); // Met à jour l'état `data`
      });
  }, [data]); // Problème : `data` est une dépendance, donc l'effet se réexécute lorsque `data` change

  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>{data.value}</p>;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

Dans cet exemple, l'effet récupère les données et les définit sur la variable d'état `data`. Cependant, `data` est également une dépendance de l'effet. Cela signifie qu'à chaque fois que `data` est mis à jour, l'effet se réexécute, récupérant à nouveau les données et définissant à nouveau `data`, ce qui entraîne une boucle infinie. Il existe plusieurs façons de résoudre ce problème :

Solution 1 : Tableau de Dépendances Vide (Chargement Initial Uniquement)

Si vous ne souhaitez récupérer les données qu'une seule fois lors du montage du composant, vous pouvez utiliser un tableau de dépendances vide :

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

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Récupérer des données à partir d'une API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result);
      });
  }, []); // Tableau de dépendances vide : l'effet ne s'exécute qu'une seule fois

  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>{data.value}</p>;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

Solution 2 : Utiliser un État Séparé pour le Chargement

Utilisez une variable d'état séparée pour suivre si les données ont été chargées. Cela empêche l'effet de se réexécuter lorsque l'état `data` change.

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

function InfiniteLoop() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (isLoading) {
      // Récupérer des données à partir d'une API
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(result => {
          setData(result);
          setIsLoading(false);
        });
    }
  }, [isLoading]); // Ne se réexécute que lorsque `isLoading` change

  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>{data.value}</p>;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

Solution 3 : Récupération Conditionnelle des Données

Récupérez les données uniquement si elles sont actuellement null. Cela empêche les récupérations suivantes après le chargement initial des données.

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

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    if (!data) {
      // Récupérer des données à partir d'une API
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(result => {
          setData(result);
        });
    }
  }, [data]); // `data` est toujours une dépendance, mais l'effet est conditionnel

  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>{data.value}</p>;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

Leçon Apprise : Soyez extrêmement prudent lorsque vous mettez à jour une variable d'état qui est également une dépendance de l'effet. Utilisez des tableaux de dépendances vides, des états de chargement séparés ou une logique conditionnelle pour éviter les boucles infinies.

4. Objets et Tableaux Mutables

Lorsque vous travaillez avec des objets ou des tableaux mutables en tant que dépendances, les modifications apportées aux propriétés de l'objet ou aux éléments du tableau ne déclencheront pas automatiquement l'effet. En effet, React effectue une comparaison superficielle des dépendances.

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

function MutableObject() {
  const [config, setConfig] = useState({ theme: 'light', language: 'en' });

  useEffect(() => {
    console.log('Config changed:', config);
  }, [config]); // Problème : Les modifications apportées à `config.theme` ou `config.language` ne déclencheront pas l'effet

  const toggleTheme = () => {
    // Mutation de l'objet
    config.theme = config.theme === 'light' ? 'dark' : 'light';
    setConfig(config); // Cela ne déclenchera pas un nouveau rendu ou l'effet
  };

  return (
    <div>
      <p>Theme: {config.theme}, Language: {config.language}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MutableObject;

            

              
                Copy
              
            
          

Dans cet exemple, la fonction `toggleTheme` modifie directement l'objet `config`, ce qui est une mauvaise pratique. La comparaison superficielle de React voit que `config` est toujours le *même* objet en mémoire, même si ses propriétés ont changé. Pour résoudre ce problème, vous devez créer un *nouvel* objet lors de la mise à jour de l'état :

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

function MutableObject() {
  const [config, setConfig] = useState({ theme: 'light', language: 'en' });

  useEffect(() => {
    console.log('Config changed:', config);
  }, [config]); // Maintenant, l'effet se déclenchera lorsque `config` change

  const toggleTheme = () => {
    setConfig({ ...config, theme: config.theme === 'light' ? 'dark' : 'light' }); // Créer un nouvel objet
  };

  return (
    <div>
      <p>Theme: {config.theme}, Language: {config.language}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MutableObject;

            

              
                Copy
              
            
          

En utilisant l'opérateur de spread (`...config`), nous créons un nouvel objet avec la propriété `theme` mise à jour. Cela déclenche un nouveau rendu et l'effet est réexécuté.

Leçon Apprise : Traitez toujours les variables d'état comme immuables. Lors de la mise à jour d'objets ou de tableaux, créez de nouvelles instances au lieu de modifier celles existantes. Utilisez l'opérateur de spread (`...`), `Array.map()`, `Array.filter()` ou des techniques similaires pour créer de nouvelles copies.

Optimiser les Hooks Personnalisés avec les Dépendances

Maintenant que nous comprenons les pièges courants, examinons comment optimiser les hooks personnalisés en gérant soigneusement les dépendances.

1. Mémoriser les Fonctions avec `useCallback`

Si votre hook personnalisé renvoie une fonction qui est utilisée comme dépendance dans un autre `useEffect`, vous devez mémoriser la fonction en utilisant `useCallback`. Cela empêche la fonction d'être recréée à chaque rendu, ce qui déclencherait inutilement l'effet.

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

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = useCallback(async () => {
    setIsLoading(true);
    try {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err);
    } finally {
      setIsLoading(false);
    }
  }, [url]); // Mémoriser `fetchData` en fonction de `url`

  useEffect(() => {
    fetchData();
  }, [fetchData]); // Maintenant, `fetchData` ne change que lorsque `url` change

  return { data, isLoading, error };
}

function MyComponent() {
  const [userId, setUserId] = useState(1);
  const { data, isLoading, error } = useFetchData(`https://api.example.com/users/${userId}`);

  return (
    <div>
      {/* ... */}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Dans cet exemple, la fonction `fetchData` est mémorisée à l'aide de `useCallback`. Le tableau de dépendances inclut `url`, qui est la seule variable qui affecte le comportement de la fonction. Cela garantit que `fetchData` ne change que lorsque l'`url` change. Par conséquent, le hook `useEffect` dans `useFetchData` ne se réexécutera que lorsque l'`url` change.

2. Utiliser `useRef` pour des Références Stables

Parfois, vous devez accéder à la dernière valeur d'une prop ou d'une variable d'état à l'intérieur d'un effet, mais vous ne voulez pas que l'effet se réexécute lorsque cette valeur change. Dans ce cas, vous pouvez utiliser `useRef` pour créer une référence stable à la valeur.

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

function LogLatestValue({ value }) {
  const latestValue = useRef(value);

  useEffect(() => {
    latestValue.current = value; // Mettre à jour la ref à chaque rendu
  }, [value]); // Mettre à jour la ref lorsque `value` change

  useEffect(() => {
    // Journaliser la dernière valeur après 5 secondes
    const timerId = setTimeout(() => {
      console.log('Latest value:', latestValue.current); // Accéder à la dernière valeur à partir de la ref
    }, 5000);

    return () => clearTimeout(timerId);
  }, []); // L'effet ne s'exécute qu'une seule fois lors du montage

  return <p>Value: {value}</p>;
}

export default LogLatestValue;

            

              
                Copy
              
            
          

Dans cet exemple, la ref `latestValue` est mise à jour à chaque rendu avec la valeur actuelle de la prop `value`. Cependant, l'effet qui journalise la valeur ne s'exécute qu'une seule fois lors du montage, grâce au tableau de dépendances vide. À l'intérieur de l'effet, nous accédons à la dernière valeur en utilisant `latestValue.current`. Cela nous permet d'accéder à la valeur la plus récente de `value` sans provoquer la réexécution de l'effet à chaque fois que `value` change.

3. Créer une Abstraction Personnalisée

Créez un comparateur ou une abstraction personnalisée si vous travaillez avec un objet, et seule une petite partie de ses propriétés est importante pour les appels `useEffect`.

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

// Comparateur personnalisé pour ne suivre que les changements de thème.
function useTheme(config) {
    const [theme, setTheme] = useState(config.theme);

    useEffect(() => {
        setTheme(config.theme);
    }, [config.theme]);

    return theme;
}

function ConfigComponent({ config }) {
    const theme = useTheme(config);

    return (
        <p>The current theme is {theme}</p>
    )
}

export default ConfigComponent;

            

              
                Copy
              
            
          

Leçon Apprise : Utilisez `useCallback` pour mémoriser les fonctions qui sont utilisées comme dépendances. Utilisez `useRef` pour créer des références stables aux valeurs auxquelles vous devez accéder à l'intérieur des effets sans provoquer la réexécution des effets. Lorsque vous travaillez avec des objets ou des tableaux complexes, envisagez de créer des comparateurs ou des couches d'abstraction personnalisés pour ne déclencher les effets que lorsque les propriétés pertinentes changent.

Considérations Globales

Lors du développement d'applications React pour un public mondial, il est important de tenir compte de l'impact des dépendances sur la localisation et l'internationalisation. Voici quelques considérations clés :

1. Changements de Locale

Si votre composant dépend de la locale de l'utilisateur (par exemple, pour formater les dates, les nombres ou les devises), vous devez inclure la locale dans le tableau de dépendances. Cela garantit que l'effet se réexécute lorsque la locale change, mettant à jour le composant avec le formatage correct.

            
import React, { useState, useEffect } from 'react';
import { format } from 'date-fns'; // Nécessite la bibliothèque date-fns (npm install date-fns)

function LocalizedDate({ date, locale }) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    setFormattedDate(format(date, 'PPPP', { locale }));
  }, [date, locale]); // Se réexécuter lorsque `date` ou `locale` change

  return <p>{formattedDate}</p>;
}

export default LocalizedDate;

            

              
                Copy
              
            
          

Dans cet exemple, la fonction `format` de la bibliothèque `date-fns` est utilisée pour formater la date en fonction de la locale spécifiée. La `locale` est incluse dans le tableau de dépendances, de sorte que l'effet se réexécute lorsque la locale change, mettant à jour la date formatée.

2. Considérations Relatives au Fuseau Horaire

Lorsque vous travaillez avec des dates et des heures, soyez attentif aux fuseaux horaires. Si votre composant affiche des dates ou des heures dans le fuseau horaire local de l'utilisateur, vous devrez peut-être inclure le fuseau horaire dans le tableau de dépendances. Cependant, les changements de fuseau horaire sont moins fréquents que les changements de locale, vous pouvez donc envisager d'utiliser un mécanisme distinct pour mettre à jour le fuseau horaire, tel qu'un contexte global.

3. Formatage de la Devise

Lors du formatage des devises, utilisez le code de devise et la locale corrects. Incluez les deux dans le tableau de dépendances pour vous assurer que la devise est formatée correctement pour la région de l'utilisateur.

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

function LocalizedCurrency({ amount, currency, locale }) {
  const [formattedCurrency, setFormattedCurrency] = useState('');

  useEffect(() => {
    setFormattedCurrency(new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount));
  }, [amount, currency, locale]); // Se réexécuter lorsque `amount`, `currency` ou `locale` change

  return <p>{formattedCurrency}</p>;
}

export default LocalizedCurrency;

            

              
                Copy
              
            
          

Leçon Apprise : Lorsque vous développez pour un public mondial, tenez toujours compte de l'impact des dépendances sur la localisation et l'internationalisation. Incluez la locale, le fuseau horaire et le code de devise dans le tableau de dépendances lorsque cela est nécessaire pour vous assurer que vos composants affichent les données correctement pour les utilisateurs dans différentes régions.

Conclusion

Maîtriser les dépendances `useEffect` est crucial pour écrire des hooks personnalisés React efficaces, sans bug et performants. En comprenant les pièges courants et en appliquant les techniques d'optimisation décrites dans ce guide, vous pouvez créer des hooks personnalisés à la fois réutilisables et maintenables. N'oubliez pas de réfléchir soigneusement aux dépendances qui sont vraiment nécessaires, d'utiliser la mémorisation et les références stables le cas échéant, et de tenir compte des considérations globales telles que la localisation et l'internationalisation. En suivant ces meilleures pratiques, vous pouvez libérer tout le potentiel des hooks personnalisés React et créer des applications de haute qualité pour un public mondial.

Ce guide complet a couvert beaucoup de terrain. Pour récapituler, voici les principaux points à retenir :

<li><b>Comprendre le but des dépendances:</b> Elles contrôlent le moment où votre effet s'exécute.</li> <li><b>Éviter les dépendances manquantes:</b> Assurez-vous que toutes les variables utilisées à l'intérieur de l'effet sont incluses.</li> <li><b>Éliminer les dépendances inutiles:</b> Utiliser la mémorisation, la déstructuration ou la comparaison approfondie.</li> <li><b>Prévenir les boucles infinies:</b> Soyez prudent lors de la mise à jour des variables d'état qui sont également des dépendances.</li> <li><b>Traiter l'état comme immuable:</b> Créer de nouveaux objets ou tableaux lors de la mise à jour.</li> <li><b>Mémoriser les fonctions avec `useCallback`:</b> Prévenir les rendus inutiles.</li> <li><b>Utiliser `useRef` pour des références stables:</b> Accéder à la dernière valeur sans déclencher de nouveaux rendus.</li> <li><b>Considérer les implications globales:</b> Tenir compte des changements de locale, de fuseau horaire et de devise.</li>

En appliquant ces principes, vous pouvez écrire des hooks personnalisés React plus robustes et efficaces qui amélioreront les performances et la maintenabilité de vos applications.