useDebugValue é um Hook do React que permite adicionar um rótulo a um Hook personalizado no React DevTools.

useDebugValue(value, format?)

Referência

useDebugValue(value, format?)

Chame useDebugValue na raiz do seu Hook personalizado para exibir um valor de depuração legível:

import { useDebugValue } from 'react';

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

Veja mais exemplos abaixo.

Parâmetros

  • value: O valor que você deseja exibir no React DevTools. Pode ter qualquer tipo.
  • opcional format: Uma função de formatação. Quando o componente é inspecionado, o React DevTools chamará a função de formatação com o value como argumento e, em seguida, exibirá o valor formatado retornado (que pode ter qualquer tipo). Se você não especificar a função de formatação, o valor original value será exibido.

Retornos

useDebugValue não retorna nada.

Uso

Adicionando um rótulo a um Hook personalizado

Chame useDebugValue na raiz do seu Hook personalizado para exibir um valor de depuração legível para React DevTools.

import { useDebugValue } from 'react';

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

Isso fornece aos componentes que chamam useOnlineStatus um rótulo como OnlineStatus: "Online" quando você os inspeciona:

Uma captura de tela do React DevTools mostrando o valor de depuração

Sem a chamada useDebugValue, apenas os dados subjacentes (neste exemplo, true) seriam exibidos.

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);
  };
}

Note

Não adicione valores de depuração a todos os Hooks personalizados. É mais valioso para Hooks personalizados que fazem parte de bibliotecas compartilhadas e que têm uma estrutura de dados interna complexa que é difícil de inspecionar.

Adiando a formatação de um valor de depuração

Você também pode passar uma função de formatação como o segundo argumento para useDebugValue:

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

Sua função de formatação receberá o valor de depuração como parâmetro e deve retornar um valor de exibição formatado. Quando seu componente é inspecionado, o React DevTools chamará essa função e exibirá seu resultado.

Isso permite evitar executar lógica de formatação potencialmente cara, a menos que o componente seja realmente inspecionado. Por exemplo, se date for um valor Date, isso evita chamar toDateString() nele para cada renderização.

PrevioususeContext
NextuseDeferredValue