ReactJS - useDebugValue 鉤子

---

---

useDebugValue 鉤子是 React 的一個工具，用於在 React DevTools 中顯示自定義鉤子的自定義標籤和值。這對於除錯和提供有關我們自己鉤子的更多資訊非常方便。

語法

useDebugValue(value, formatFn);

引數

• value − 這是我們想要顯示的值。它可以是任何 JavaScript 值，例如文字、整數或物件，也可以是函式。

• formatFn − 這是一個函式，它接收一個值作為引數，並返回一個表示專案標籤或描述的字串。我們還可以向值新增自定義標籤。

返回值

鉤子 'useDebugValue' 不返回任何值。

參考

為了顯示可讀的除錯值，我們可以在自定義 Hook 的頂層呼叫 'useDebugValue' −

import { useDebugValue, useState } from 'react';
function useCounter() {
   const [count, setCount] = useState(0);
   
   // Display the count and a status message
   useDebugValue(count, (count) => `Count: ${count}, Status: ${count === 0 ? 'Empty' : 'Not Empty'}`);
   
   const increment = () => setCount(count + 1);
   const decrement = () => setCount(count - 1);
   return { count, increment, decrement };
}

示例

我們可以透過兩種不同的方式使用此鉤子。首先，我們可以透過向自定義 Hook 新增標籤來使用它，其次，我們可以透過延遲除錯值的格式化來使用它。因此，我們將逐一檢視這兩個選項。

示例 - 向自定義 Hook 新增標籤

為了顯示可讀的除錯值，我們將在自定義 Hook 的頂層呼叫 useDebugValue。

import { useDebugValue } from 'react';

function signInStatus() {
   // ...  
   useDebugValue(isSignIn ? 'SignIn' : 'Signout');
}

在此示例中，我們將根據使用者的身份驗證狀態使用 useDebugValue 鉤子顯示自定義標籤。

useAuthStatus.js

import { useDebugValue } from "react";

export function useAuthStatus() {
   const isAuthenticated = checkAuthentication();
   
   // Use the useDebugValue hook
   useDebugValue(isAuthenticated ? "Authenticated" : "Not Authenticated");
   
   return isAuthenticated;
}
function checkAuthentication() {
   // Checking authentication status of the user
   return Math.random() < 0.5; // Authentication status will be False
   // return Math.random() > 0.5; // Authentication status will be True
}

App.js

 import { useAuthStatus } from "./useAuthStatus.js";

function AuthStatusComponent() {
   const isAuthenticated = useAuthStatus();   
   return (
      <div>
         <h1>{isAuthenticated ? "Authenticated" : "Not Authenticated"}</h1>
      </div>
   );
}

export default function App() {
   return <AuthStatusComponent />;
}

輸出

示例 - 延遲除錯值格式化

作為 useDebugValue 鉤子的第二個引數，我們還可以指定一個格式化函式。

以下示例中的 useDateValue 自定義鉤子將 useDebugValue 鉤子與 formatDateString 格式化方法結合使用。這消除了在每次渲染時對 Date 變數使用 toDateString() 的需要。此技術使程式碼更高效。由於使用了 useDebugValue 鉤子，因此只有在檢查元件時才會呼叫 formatDateString 方法。

useDateValue.js

import { useDebugValue } from 'react';

export function useDateValue(date) {
   // Define a formatting function that formats the Date value
   const formatDateString = (date) => date.toDateString();
   
   // Use the useDebugValue hook with the formatting function
   useDebugValue(date, formatDateString);   
   return date;
}

App.js

import { useDateValue } from './useDateValue.js';

function DateComponent() {
   const currentDate = useDateValue(new Date());   
   return (
      <div>
         <h1>Current Date: {currentDate.toDateString()}</h1>
      </div>
   );
}

export default function App() {
   return <DateComponent />;
}

輸出

Current Date: Wed Oct 11 2023

示例 - 計數器應用

因此，我們可以新增 useDebugValue 以在除錯時以更具資訊的方式顯示計數。useDebugValue 鉤子對於在除錯期間提供有關自定義鉤子或元件的值的其他資訊很有用。

import React, { useState, useDebugValue } from 'react';

function App() {
   const [count, setCount] = useState(0);   
   const increment = () => {
      setCount(count + 1);
   };   
   const decrement = () => {
      setCount(count - 1);
   };
   
   // Display the count value in a more informative way for debugging
   useDebugValue(`Count: ${count}`);
   
   return (
      <div>
         <h1>Counter App</h1>
         <p>Count: {count}</p>
         <button onClick={increment}>Increment</button>
         <button onClick={decrement}>Decrement</button>
      </div>
   );
}
export default App;

輸出

注意

useDebugValue 鉤子是幫助開發人員理解和除錯自身程式碼的有用工具。但是，務必謹慎使用它並瞭解其侷限性。它是我們工具箱中的一個工具，我們應該謹慎使用它以避免問題並使我們的程式碼更易於處理。