useDebugValue es un Hook de React que te permite a├▒adir una etiqueta a un Hook personalizado en las herramientas de desarrollo de React.

useDebugValue(value, format?)

Referencia

useDebugValue(value, format?)

Llama a useDebugValue en el primer nivel de tu Hook personalizado para mostrar un valor de depuraci├│n legible:

import { useDebugValue } from 'react';

function useOnlineStatus() {
// ...
useDebugValue(isOnline ? 'Online' : 'Offline');
// ...
}

Más ejemplos debajo.

Parámetros

  • value: El valor que quieres mostrar en las herramientas de desarrollo de React. Puede tener cualquier tipo.
  • format opcional: Una funci├│n de formateo. Cuando se inspecciona el componente, las herramientas de desarrollo de React llamar├ín a la funci├│n de formateo con value como argumento, y mostrar├ín el valor formateado devuelto (que puede tener cualquier tipo). Si no especificas la funci├│n de formateo, se mostrar├í el mismo valor value original.

Devuelve

useDebugValue no devuelve nada.

Uso

A├▒adir una etiqueta a un Hook personalizado

Llama a useDebugValue en el primer nivel de tu Hook personalizado para mostrar un valor de depuraci├│n legible para las herramientas de desarrollo de React.

import { useDebugValue } from 'react';

function useOnlineStatus() {
// ...
useDebugValue(isOnline ? 'Online' : 'Offline');
// ...
}

Esto le da a los componentes que llamen a useOnlineStatus una etiqueta como OnlineStatus: "Online" cuando lo inspeccionas:

Una captura de pantalla de las herramientas de desarrollo de React que muestra el valor de depuraci├│n

Sin la llamada a useDebugValue, solo se mostrarán los datos subyacentes (en este ejemplo, true).

import { useSyncExternalStore, useDebugValue } from 'react';

export function useOnlineStatus() {
  const isOnline = useSyncExternalStore(subscribe, () => navigator.onLine, () => true);
  useDebugValue(isOnline ? 'Online' : 'Offline');
  return isOnline;
}

function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

Nota

No recomendamos a├▒adir valores de depuraci├│n a cada Hook personalizado. Es m├ís valioso para Hooks personalizados que son parte de bibliotecas compartidas y que tienen una estructura de datos compleja interna que es dif├şcil de inspeccionar.


Aplazar el formateo de un valor de depuraci├│n

Puedes tambi├ęn pasar una funci├│n de formateo como segundo argumento para useDebugValue:

useDebugValue(date, date => date.toDateString());

Tu función de formateo recibirá el valor de depuración como parámetro y debe retornar un valor de visualización formateado. Cuando tu componente es inspeccionado, las herramientas de desarrollo de React llamarán a la función de formateo y mostrarán el resultado.

Esto permite evitar ejecutar una l├│gica de formateo potencialmente costosa a no ser que el componente est├ę siendo inspeccionado. Por ejemplo, si date es un valor de fecha, evita llamar a toDateString() para cada renderizado del componente.