🥲

React Hooksの10種類を理解する(Additional: useDebugValue)

1 min read

React Hooksの10種類を理解する(Additional: useDebugValue)

useDebugValueとは

  • useDebugValueを使用することによって、React DevToolsにてカスタムフックのlabelを表示することができる。
function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}
  • この場合、isOnlineがtrueだった場合は、labelとして'Online'が出力され、falseの場合は'Offline'が出力されることになる。
  • Debug用の値のformatを遅延させたい場合は、第2引数としてformat用関数を受け付ける。
useDebugValue(date, date => date.toDateString());
  • ここでは、dateを引数として受け取って、toDateString関数によってformat済みの表示用の値を返すことにより、不用意に関数を呼び出すことを防いでいる。

reference

GitHubで編集を提案

Discussion

ログインするとコメントできます