useDebugValue

Learn how to display a label for custom Hooks in React DevTools.

We'll cover the following

Assign a label to custom Hooks
Delayed formatting of the debug value

Loading time with a formatting function
Loading time without a formatting function

Assign a label to custom Hooks

The useDebugValue() Hook is used purely for optimizing the developer’s debugging experience. We call it in the following way:

useDebugValue(value);

It doesn’t create any real value in an application for the end user. useDebugValue() allows us to give custom Hooks a label that we can then inspect in the React DevTools:

Get hands-on with 1200+ tech skills courses.

Introduction

Introduction to ES2015+

JSX – an Introduction

Rendering of Elements and Components in React

State and Lifecycle Methods

Event Handling

Forms

Lists, Fragments, and Conditional Rendering

CSS and Styling

Higher Order Components

Functions as a Child and Render Props

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Conclusion

Appendix

useDebugValue

Assign a label to custom Hooks