useDebugValue.md

title
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 {/reference/}

useDebugValue(value, format?) {/usedebugvalue/}

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 {/parameters/}

• 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 {/returns/}

useDebugValue ne vraća ništa.

Upotreba {/usage/}

Dodavanje labele u prilagođeni Hook {/adding-a-label-to-a-custom-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:

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

import { useOnlineStatus } from './useOnlineStatus.js';

function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ Online' : '❌ Diskonektovano'}</h1>;
}

export default function App() {
  return <StatusBar />;
}

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

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 {/deferring-formatting-of-a-debug-value/}

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.