精读React hooks（十五）：把useDebugValue加入你的React调试工具库

🧑‍💻

推荐全栈学习资源：

Next.js 中文文档：样式和官网一样的中文文档，创造沉浸式Next.js中文学习体验。

《Chrome插件全栈开发》：真实出海项目的实战教学课，讲解Chrome插件和Next.js端的全栈开发，帮助你半个月内成为全栈出海工程师。

useDebugValue 是一个专为开发者调试自定义 hook 而设计的 React hook。对于大多数应用开发者来说，可能不会直接使用它，但对于那些需要创建和维护自定义 hooks 的开发者来说，useDebugValue 可以提供一个更加友好的显示，帮助开发者更容易地理解该 Hook 的当前状态。

`useDebugValue`的使用

这是 useDebugValue 的用法定义：

useDebugValue(value, format?)

value 是你想在 React 开发工具中显示的值，可以是任何类型
format 是一个可选参数，它接受一个格式化函数。这个参数的用途是：某些情况下，会存在开销较大的格式化逻辑，为了避免不必要的计算，把格式化逻辑放在 format，就可以让这个格式化逻辑只在 DevTools 需要显示这个值的时候才执行。

用法示例

在《精读React hook（十三）：使用useSyncExternalStore获取实时数据》中，我们有一个监听网络状态的演示案例，现在我为了调试更科学，想把网络状态也显示在 React 开发工具上面，我在原来的 hook 里添加 useDebugValue 就可以：

export function useOnlineStatus() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
  // useDebugValue
  useDebugValue(isOnline ? "✅ Online(useDebugValue)" : "❌ Disconnected(useDebugValue)")
  return isOnline;
}

现在我打开 React 开发工具，可以看到 useOnlineStatus 的返回值显示出来了：

useDebugValue 为开发者做的事就是这么简单。你也可以到👉我的演示站验证。

`useDebugValue`的价值

初看 useDebugValue 你会觉得它并没有带来什么价值，其实不然，例如在大型项目中可能会有很多自定义 Hooks，为这些 Hooks 提供清晰的 debug 值可以帮助团队更容易地识别和解决问题；而对于开源的自定义 Hooks，提供这样的 debug 值更是对使用者的友好提示。

总结一下 useDebugValue 的主要价值点：

提供清晰的调试信息：当你在 React 开发工具中查看一个组件，如果该组件使用了多个自定义 Hooks，useDebugValue 可以帮助你更清晰地理解每个 Hook 的当前状态。这对于追踪和理解组件的行为非常有帮助。
增强自定义 Hooks 的可用性：如果你创建了一个自定义 Hook 并计划与团队或社区共享，使用 useDebugValue 可以使其他开发者更容易地理解和调试使用了你的 Hook 的组件。
按需计算：useDebugValue 可以接受一个格式化函数，这意味着你可以按需计算调试值，避免不必要的计算开销。