useDebugValue

Hook useDebugValue là một hook dùng để hiển thị giá trị các biến của custom hook ở trong React Dev Tools.

Ví dụ:

import { useDebugValue } from "react"
 
function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? "Online" : "Offline")
  // ...
}

Khi inspect trang Web bằng React DevTools thì ta sẽ thấy giá trị truyền vào hook sẽ được hiển thị ra:

Có thể thấy là React tự nhận diện được custom hook và bỏ đi prefix use khi hiển thị.

Note

Chỉ sử dụng hook useDebugValue cho các custom hook mà có các cấu trúc dữ liệu bên trong phức tạp và khó inspect.

Chúng ta cũng có thể truyền vào hook một formatting function ở tham số thứ hai.

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

Formatting function sẽ nhận vào debug value ở tham số thứ nhất (biến date) và chỉ thực thi khi nào chúng ta thực hiện inspect.

Resources