适用范围

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》。