ReactJS – useDebugValue hook

ReactJSWeb DevelopmentFront End Technology

In this article, we are going to see how to debug the custom hooks with the useDebugValue hook in ReactJS.

This hook provides custom labels to custom hooks so as to make the process of debugging easier and efficient. It is only called when the React Developer tools are toggled on.

Syntax

useDebugValue(value,()=>{})

Parameters

  • Value − Label for the custom hook.

  • ()=>{} − Function to format the label.

Example

In this example, we will build a React application that displays a custom label for the custom hook of our React application.

App.jsx

function useCustomHook(val) {
   const [value, setValue] = useState(null);
   useDebugValue(value ? Not Empty : Empty);
   return value;
}

Output

It will show the label next to the useCustomHook in React developer tools. For example, if the value state is 'empty', then the label has the value of ‘Empty’.

raja
Published on 19-Mar-2021 10:45:30
Advertisements