共计 710 个字符，预计需要花费 2 分钟才能阅读完成。
适用范围
useDebugValue实用于：调试（输入）自定义 Hook 中用到的状态值。
大家通常应用 console.log 来输入一些两头变量，并在浏览器的 console 面板中查看。
而 useDebugValue 的劣势在于，用 useDebugValue 输入的值，是和 DevTools 中的 Hook 状态一起动态显示的，不须要在 DevTools 和 Console 面板中切换查看 Hook 状态和 console.log 输入。
示例
比方下图的 RunJS 编辑器界面，左侧的 css/js 编辑器，都能够高低拖动，其高度比例在每次拖动开始时（onDragStart），须要长期做一下存储（设为 current 变量）。
其实现过程用到一个自定义的 useEditorHeight 的 Hook，拖动过程中会扭转 current 的值。当我给 useEditorHeight 增加以下代码：
function useEditorHeight() {const [current, setCurrent] = {html: 1/3, css: 1/3, js: 1/3}
// onDragStart，更新 current
useEditorHeight(current)
}此时，长期变量（current），就会和其余 State 一起，显式地以 DebugValue 为名称，显示在 DevTools 面板中。而其余变量，都是对立以 State/Effect 来命名。当 Hook 中的变量较多时，不肯定容易分辨出哪一个变量是你关怀的。
总结
可见，useDebugValue的作用是，将你须要关怀的变量动静地与其余同域变量一起显示在 DevTools 面板中，其体验，显著优于console.log。
拓展
本文章来自《重学 React》。