🥲
React Hooksの10種類を理解する（Additional: useDebugValue）
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済みの表示用の値を返すことにより、不用意に関数を呼び出すことを防いでいる。
Discussion