Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
ReactJS – useDebugValue hook
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’.
Updated on: 19-Mar-2021
201 Views
Advertisements