useDebugValue

useDebugValue 可以在 React 开发者工具中显示自定义 hook 的标签。很多时候我们是不需要使用这个 hook 的，但是在某些情况下，我们可能需要使用它来调试我们的自定义 hook，这样我们就可以在 React Devtools 中看到组件中我们自定义 hook 返回的内容了。

例子

import React, { useDebugValue, useState } from "react";
const useFriendStatus = (friendID) => {
  const [isOnline, setIsOnline] = useState(null);

  return isOnline;
};

export default function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);
  // 在这个组件中我们就不知道当前状态下 isOnline 是 true 还是 false
  // 所以我们可以使用 useDebugValue 来显示当前状态下 isOnline 的值
  useDebugValue(isOnline ? "Online" : "Offline");
  return <div>hhhh</div>;
}

源码说明