API Reference
Hooks

useDebugValue

useDebugValue je React Hook koji vam omogućava da dodate labelu za vaš prilagođeni Hook u React DevTools-u.

useDebugValue(value, format?)

Reference

useDebugValue(value, format?)

Pozovite useDebugValue na vrhu vašeg prilagođenog Hook-a da biste prikazali čitljivu debug vrednost:

import { useDebugValue } from 'react';

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

Pogledajte još primera ispod.

Parametri

  • value: Vrednost koju želite da prikažete u React DevTools-u. Može imati bilo koji tip.
  • opcioni format: Funkcija za formatiranje. Kada se komponenta pregleda, React DevTools će pozvati funkciju za formatiranje sa argumentom value, a onda prikazati formatiranu vrednost koja je vraćena (koja može imati bilo koji tip). Ako ne specificirate funkciju za formatiranje, prikazaće se originalni value.

Povratne vrednosti

useDebugValue ne vraća ništa.

Upotreba

Dodavanje labele u prilagođeni Hook

Pozovite useDebugValue na vrhu vašeg prilagođenog Hook-a da biste prikazali čitljivu debug vrednost za React DevTools.

import { useDebugValue } from 'react';

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

Ovo daje komponentama koje pozivaju useOnlineStatus labelu poput OnlineStatus: "Online" kada ih pregledate:

Screenshot React DevTools-a koji prikazuje debug vrednost

Bez useDebugValue poziva, samo će podaci (u ovom primeru, true) biti prikazani.

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

Napomena

Nemojte dodavati debug vrednosti u svaki prilagođeni Hook. Najkorisnije je za prilagođene Hook-ove koji su deo deljenih biblioteka i koji imaju kompleksnu unutrašnju strukturu podataka koju je teško pregledati.

Odlaganje formatiranja debug vrednosti

Možete proslediti i funkciju za formatiranje kao drugi argument u useDebugValue:

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

Vaša funkcija za formatiranje će primiti debug vrednost kao parametar i trebalo bi da vrati formatiranu vrednost za prikazivanje. Kada vaša komponenta bude pregledana, React DevTools će pozvati ovu funkciju i prikazazi njen rezultat.

Ovo vam omogućava da izbegnete izvršavanje potencijalno skupe logike formatiranja osim ako komponenta zapravo nije pregledana. Na primer, ako je date, vrednost Date tipa, ovo izbegava pozivanje toDateString() za svaki render.

PrevioususeContext
NextuseDeferredValue