Comment pouvez-vous utiliser le hook useDebugValue pour déboguer des composants personnalisés dans React ?

1 Qu’est-ce que useDebugValue ?

useDebugValue est un hook intégré qui accepte une valeur ou une fonction en tant qu’argument et l’affiche en tant qu’étiquette pour le hook personnalisé dans les outils de développement React. Cela peut vous aider à inspecter l’état et le comportement de vos hooks personnalisés sans ajouter d’instructions console.log ou de points d’arrêt. Par exemple, si vous disposez d’un hook personnalisé qui récupère des données à partir d’une API, vous pouvez utiliser useDebugValue pour afficher l’état de la demande, tel que le chargement, la réussite ou l’erreur.

3 Comment formater useDebugValue ?

Parfois, la valeur que vous souhaitez afficher avec useDebugValue peut être trop importante, complexe ou coûteuse à calculer. Dans ce cas, vous pouvez passer une fonction au lieu d’une valeur à useDebugValue, et cette fonction ne sera appelée que lorsque les outils de développement React seront ouverts. La fonction doit renvoyer une valeur formatée facile à lire et à comprendre. Par exemple, si vous disposez d’un hook personnalisé qui utilise l’API Geolocation pour obtenir l’emplacement de l’utilisateur, vous pouvez utiliser useDebugValue pour afficher la latitude et la longitude :

import { useState, useEffect, useDebugValue } from "react";
function useLocation() {
  const [location, setLocation] = useState(null);
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (position) => setLocation(position.coords),
      (error) => setLocation(error)
    );
  }, []);
  useDebugValue(location, (value) => {
    if (value instanceof Error) {
      return "Error: " + value.message;
    } else if (value) {
      return "Latitude: " + value.latitude + ", Longitude: " + value.longitude;
    } else {
      return "Loading...";
    }
  });
  return location;
}        

Ensuite, dans les outils de développement React, vous pouvez voir l’étiquette « useLocation : Latitude : 40.7128, Longitude : -74.0060 » ou « useLocation : Error : User denied Geolocation » ou « useLocation : Loading... » en fonction de l’état de l’hameçon.

4 Comment utiliser des noms personnalisés pour useDebugValue ?

Par défaut, le hook useDebugValue utilisera le nom du hook personnalisé comme étiquette dans les outils de développement React. Toutefois, si vous avez plusieurs instances du même hook personnalisé dans votre arborescence de composants, vous souhaiterez peut-être les différencier avec des noms personnalisés. Pour ce faire, vous pouvez utiliser la propriété displayName sur la fonction de hook personnalisée et lui attribuer un nom unique. Par exemple, si vous avez deux composants qui utilisent le hook useCounter, vous pouvez les nommer « CounterA » et « CounterB » comme ceci :

import { useState, useDebugValue } from "react";
function useCounter() {
  const [count, setCount] = useState(0);
  useDebugValue(count);
  const increment = () => setCount((prev) => prev + 1);
  return [count, increment];
}
useCounter.displayName = "CounterA";
function CounterA() {
  const [count, increment] = useCounter();
  return (
    <div>
      <p>Counter A: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
useCounter.displayName = "CounterB";
function CounterB() {
  const [count, increment] = useCounter();
  return (
    <div>
      <p>Counter B: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}        

Ensuite, dans les outils de développement React, vous pouvez voir les étiquettes « CounterA : 0 » et « CounterB : 0 » à côté des composants correspondants.

6 Voici ce qu’il faut prendre en compte d’autre

Il s’agit d’un espace pour partager des exemples, des histoires ou des idées qui ne correspondent à aucune des sections précédentes. Que voudriez-vous ajouter d’autre ?