useDebugValue

Nota bene

Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un’ulteriore revisione da parte della community sarebbe comunque utile. Migliora questa traduzione.

useDebugValue è un Hook React che ti permette di aggiungere un’etichetta a un custom Hook in React DevTools.

useDebugValue(value, format?)

Reference
- useDebugValue(value, format?)
Usage
- Aggiungere un’etichetta a un custom Hook
- Posticipare la formattazione di un valore di debug

Reference

`useDebugValue(value, format?)`

Chiama useDebugValue al top level del tuo custom Hook per visualizzare un valore di debug leggibile:

import { useDebugValue } from 'react';

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

Vedi altri esempi sotto.

Parameters

value: Il valore che vuoi visualizzare in React DevTools. Può essere di qualsiasi tipo.
optional format: Una funzione di formattazione. Quando il componente viene ispezionato, React DevTools chiamerà la funzione di formattazione con il value come argomento, e poi visualizzerà il valore formattato restituito (che può essere di qualsiasi tipo). Se non specifichi la funzione di formattazione, verrà visualizzato il value originale.

Returns

useDebugValue non restituisce nulla.

Usage

Aggiungere un’etichetta a un custom Hook

Chiama useDebugValue al top level del tuo custom Hook per visualizzare un valore di debug leggibile per React DevTools.

import { useDebugValue } from 'react';

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

Questo fornisce ai componenti che chiamano useOnlineStatus un’etichetta come OnlineStatus: "Online" quando li ispezioni:

Uno screenshot di React DevTools che mostra il valore di debug

Senza la chiamata a useDebugValue, verrebbero visualizzati solo i dati sottostanti (in questo esempio, true).

Fork

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 bene

Non aggiungere valori di debug a ogni custom Hook. È soprattutto utile per i custom Hook che fanno parte di librerie condivise e che hanno una struttura dati interna complessa, difficile da ispezionare.

Posticipare la formattazione di un valore di debug

Puoi anche passare una funzione di formattazione come secondo argomento a useDebugValue:

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

La tua funzione di formattazione riceverà il valore di debug come parametro e dovrebbe restituire un valore di visualizzazione formattato. Quando il tuo componente viene ispezionato, React DevTools chiamerà questa funzione e visualizzerà il suo risultato.

Questo ti permette di evitare di eseguire una logica di formattazione potenzialmente costosa a meno che il componente non venga effettivamente ispezionato. Ad esempio, se date è un valore Date, questo evita di chiamare toDateString() su di esso per ogni renderizzazione.

PrevioususeContext

NextuseDeferredValue