Le hook React useDebugValue

Le hook React useDebugValue offre un moyen d’afficher des informations de débogage personnalisées pour les hooks personnalisés dans React DevTools. Apprendre comment l’utiliser.

Un outil clé de l’écosystème React pour le débogage et l’inspection des hiérarchies de composants est React DevTools. Dans ce contexte, nous examinerons une fonctionnalité spécifique de React DevTools : une extension disponible pour Chrome, Firefox et Bord navigateurs qui fournissent une analyse approfondie des arborescences de composants des applications React.

Dans cet article, nous verrons comment le useDebugValue hook permet aux développeurs d’ajouter des étiquettes personnalisées à leurs hooks personnalisés, rendant ces valeurs visibles dans React DevTools et simplifiant le processus de débogage.

React DevTools est une extension qui s’intègre directement dans les navigateurs populaires. Il permet aux développeurs d’inspecter les accessoires, l’état, le contexte et les hooks des composants React en temps réel, améliorant ainsi considérablement le processus de débogage.

Supposons que nous ayons une petite application React qui utilise un hook personnalisé nommé useCounter pour gérer l’état lié à un compteur. Le useCounter hook initialise un état de comptage avec une valeur initiale facultative et fournit un increment fonction pour mettre à jour ce décompte. Le App Le composant affiche un en-tête affichant le décompte actuel et un bouton qui, lorsque vous cliquez dessus, incrémente le décompte.

import React from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = React.useState(initialValue);
  const increment = () => setCount((prevCount) => prevCount + 1);
  return [count, increment];
}

function Heading({ count }) {
  return <h1>Count: {count}</h1>;
}

function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

export default function App() {
  const [count, increment] = useCounter(0);

  return (
    <div>
      <Heading count={count} />
      <Button text="Click Me!" onClick={increment} />
    </div>
  );
}

Avec React DevTools, nous pourrons inspecter l’état et le comportement actuels du useCounter hook directement dans l’arborescence des composants. Cette visibilité peut être essentielle pour le débogage, car elle donne un aperçu de la manière dont les hooks personnalisés gèrent l’état et interagissent avec d’autres composants d’une application.

useDebugValue

Le useDebugValue hook offre aux développeurs un moyen d’afficher des informations de débogage personnalisées pour les hooks personnalisés dans React DevTools. Cette fonctionnalité est particulièrement utile pour les auteurs et développeurs de bibliothèques qui créent et utilisent des hooks personnalisés dans leurs applications. Il permet de mieux comprendre ce qui se passe à l’intérieur d’un hook, ce qui rend le débogage plus simple.

Utiliser useDebugValue, nous pouvons simplement l’invoquer dans un hook personnalisé, en transmettant la valeur que nous voulons déboguer. Par exemple, dans notre useCounter hook, supposons que nous souhaitions afficher la valeur de comptage actuelle dans React DevTools pour faciliter le débogage de l’état interne du hook. Nous pouvons y parvenir en ajoutant un appel à useDebugValue à l’intérieur de useCounter crochet:

import React from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = React.useState(initialValue);

  
  React.useDebugValue(`Count: ${count}`);

  const increment = () => setCount((prevCount) => prevCount + 1);
  return [count, increment];
}

Dans cette version modifiée du useCounter crochet, useDebugValue est utilisé pour fournir une valeur de débogage personnalisée (Count: ${count}) qui apparaîtra dans React DevTools.

En utilisant le useDebugValue hook, les développeurs peuvent grandement simplifier le processus de débogage des hooks personnalisés en rendant les états et les comportements internes facilement visibles dans React DevTools.

Formatage avec une fonction

Le useDebugValue hook va encore plus loin en permettant le passage d’une fonction de formatage comme deuxième argument. Cette fonction reçoit la valeur de débogage en paramètre et renvoie une valeur d’affichage formatée. Ceci est particulièrement utile lorsque la valeur de débogage est complexe ou doit être présentée de manière plus lisible ou informative.

À titre d’exemple, considérons un hook personnalisé qui gère les valeurs de date. L’état brut peut être un JavaScript Date objet, ce qui n’est pas immédiatement clair lorsqu’il est considéré comme une valeur de débogage. En fournissant une fonction de formatage, nous pouvons afficher la date dans un format plus lisible par l’homme.

Voici comment nous pourrions implémenter quelque chose comme ceci :

import React from 'react';

function useFormattedDate(date = new Date()) {
  const [currentDate, setCurrentDate] = React.useState(date);

  
  React.useDebugValue(currentDate, date => date.toISOString());

  return [currentDate, setCurrentDate];
}

export default function App() {
  const [currentDate] = useFormattedDate();

  return (
    <div>
      <h1>Current Date: {currentDate.toISOString()}</h1>
    </div>
  );
}

Dans l’exemple ci-dessus, useDebugValue est utilisé dans le useFormattedDate crochet pour afficher la date actuelle. Cependant, au lieu de montrer le Date directement l’objet, il utilise une fonction de formatage (date => date.toISOString()) pour convertir la date en chaîne ISO. Cela rend les informations de débogage plus accessibles et utiles, en particulier lors d’une analyse rapide via React DevTools.

Conclure

Le useDebugValue hook offre aux développeurs un moyen simple et efficace d’ajouter des informations de débogage lisibles et significatives directement dans React DevTools pour leurs hooks personnalisés. De plus, l’utilisation optionnelle d’une fonction de formatage avec le useDebugValue Le hook permet de personnaliser la façon dont les valeurs de débogage sont affichées, offrant une flexibilité dans la gestion de divers types et structures de données.

Pour plus de détails sur le useDebugValue crochet, assurez-vous de lire attentivement le documentation officielle de React.