ReactHooksについてまとめる（Other Hooks useDebugValue）

概要

ReactHooksのOther Hooksについてのメモ記事です。基本的にReactの公式ドキュメントの咀嚼記事となっています。

今回はuseDebugValue編です。

useDebugVlue

useDebugValueは、React DevToolsのカスタムHookにラベルを追加するためのReact Hookです。

カスタムHookにラベルを追加する

useOnlineStatusを呼び出すコンポーネントには、
OnlineStatus: "Online "のようなラベルが表示されます。

import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

デバッグ値のフォーマット関数を使用できる

useDebugValueはフォーマット関数を受け取り、コンポーネントが検査される時、React DevToolsはフォーマット関数を呼び出し、その結果を表示させることができます。

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

最後に

useDebugValueは特に使用する必要はなく、複雑なフック時やフックの状態が明らかになっていなく確認したい場合のみ必要になる時があるかもしれません。

参考