useDebugValue

useDebugValue merupakan React Hook yang memungkinkan Anda untuk menambahkan label ke sebuah kustom Hook di dalam React DevTools.

useDebugValue(value, format?)

Reference
- useDebugValue(value, format?)
Penggunaan
- Menambahkan sebuah label ke sebuah kustom Hook
- Menunda pemformatan nilai debug

Reference

`useDebugValue(value, format?)`

Panggil useDebugValue di bagian atas kustom Hook Anda untuk manampilkan nilai debug yang dapat dibaca:

import { useDebugValue } from 'react';

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

Lihat lebih banyak contoh di bawah ini.

Parameter

value: Nilai yang Anda inginkan untuk ditampilkan di dalam React DevTools. Nilai tersebut dapat memiliki tipe apa pun.
format opsional: Sebuah fungsi format. Ketika komponen diperiksa, React DevTools akan memanggil fungsi pemformatan dengan value sebagai argumennya, dan kemudian menampilkan nilai kembalian yang telah diformat (yang mungkin memiliki jenis apapun). Jika Anda tidak menentukan fungsi pemformatan, value asli itu sendiri yang akan ditampilkan.

Kembalian

useDebugValue tidak mengembalikan apapun.

Penggunaan

Menambahkan sebuah label ke sebuah kustom Hook

Panggil useDebugValue pada bagian atas kustom Hook Anda untuk menampilkan nilai debug yang dapat dibaca untuk React DevTools.

import { useDebugValue } from 'react';

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

Ini membiarkan komponen memanggil useOnlineStatus sebuah label seperti OnlineStatus: "Online" ketika Anda memeriksa mereka:

Sebuah tangkapan layar React DevTools yang menunjukan nilai debug

Tanpa panggilan useDebugValue, hanya data yang mendasarinya (dalam contoh ini, true) akan ditampilkan.

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

Note

Jangan menambahkan nilai debug untuk setiap kustom Hook. Itu paling berharga untuk kustom Hooks yang merupakan bagian dari pustaka bersama dan memiliki struktur data internal kompleks yang sulit untuk diperiksa.

Menunda pemformatan nilai debug

Anda juga bisa meneruskan fungsi pemformatan sebagai argumen kedua ke useDebugValue:

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

Fungsi pemformatan Anda akan menerima nilai debug sebagai sebuah parameter dan akan kembali sebuah nilai tampilan yang diformat. Ketika komponen Anda diperiksa, React DevTools akan memanggil fungsi ini dan menampilkan hasilnya.

Ini memungkinkan Anda menghindari menjalankan logika pemformatan yang berpotensi mahal kecuali komponen benar-benar diperiksa. Sebagai contoh, jika date merupakan sebuah nilai Tanggal, ini menghindari pemanggilan toDateString() pada setiap render komponen.

PrevioususeContext NextuseDeferredValue