你不知道的React系列（二十三）useDebugValue

本文正在参加「金石计划」

自定义hook命名

useDebugValue(value, format?)

• value

  React DevTools 展示的内容

• format

  一个函数接收 value 为参数，React DevTools 展示的内容

• 共享组件和复杂的内在逻辑才需要

import { useSyncExternalStore, useDebugValue } from 'react';

export function useOnlineStatus() {
  const isOnline = useSyncExternalStore(subscribe, () => navigator.onLine, () => true);
  useDebugValue(isOnline ? 'Online' : 'Offline');
  return isOnline;
}

function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

• 格式化显示hook命名

useDebugValue(date, date => date.toDateString()