useDebugValue

用于在 React 开发者工具中显示自定义 hook 的标签

import React, { useState, useDebugValue } from 'react';
import ReactDOM from 'react-dom';
// 自定义 Hook
function useMyCount(num) {
  const [ count, setCount ] = useState(0);
  // 延迟格式化
  useDebugValue(count > num ? '溢出' : '不足', status => {
    return status === '溢出' ? 1 : 0;
  });
  const myCount = () => {
    setCount(count + 2);
  }
  return [ count, myCount ];
}
function App() {
  const [ count, seCount ] = useMyCount(10);
  return (
    <div>
      {count}
      <button onClick={() => seCount()}>setCount</button>
    </div>
  )
}
ReactDOM.render(<App />, root);

:::info 不推荐你向每个自定义 Hook 使用 useDebugValue，只有自定义 Hook 被复用时才最有意义。 :::