1、作用：

用于在開發過程中幫助開發者調試自定義 Hook。它的作用是將自定義 Hook 中的某些值暴露給 React 開發工具（例如 React DevTools）以便于調試。

當我們使用 React 開發工具查看組件的狀態時，React DevTools 會從組件和其所有子組件中收集信息并顯示在 DevTools 界面上。但是自定義 Hook 中的狀態信息可能無法通過這種方式進行收集和顯示。

2、參數

• 第一個參數是要暴露的值，可以是任何類型的值。
• 第二個可選參數是函數，用于將要暴露的值轉換為可讀性更好的字符串。

3、示例

import { useState, useDebugValue } from 'react';function useCustomHook() {const [count, setCount] = useState(0);useDebugValue(count > 5 ? 'Count is greater than 5' : 'Count is less than or equal to 5');return [count, setCount];
}

在上述示例中，我們定義了一個自定義 Hook useCustomHook，用于管理計數器的值。在 useDebugValue 中，我們將計數器的值暴露給 React 開發工具，如果計數器的值大于 5，則顯示 "Count is greater than 5"；否則，顯示 "Count is less than or equal to 5"。

使用 React DevTools 查看該 Hook 的狀態時，我們可以看到 count 的值，以及格式化后的字符串。

useCustomHook()0

當 count 值變化時，DevTools 界面會實時更新。如果 count 大于 5，那么字符串將會顯示為 "Count is greater than 5"。