React Hooks Revisited: useDebugValue
Tags: react, javascript, webdev, tutorial
Published: 2020-09-18 12:59:41

---
title: "React Hooks Revisited: useDebugValue"
published: true
tags:
  - "react"
  - "javascript"
  - "webdev"
  - "tutorial"
series: React Hooks Revisited
canonical_url: https://ryanharris.dev/hooks-usedebugvalue/
---
### #TIL

I'll be honest: before working on this series, I had never heard of `useDebugValue` (or seen it in a codebase).

Unlike the hooks we've covered thus far, `useDebugValue` is not intended to add functionality to your applications. Instead, as the name suggests, it is used as a debugging tool and can help developers troubleshoot issues in their custom React hooks.

> We don’t recommend adding debug values to every custom Hook. It’s most valuable for custom Hooks that are part of shared libraries. ~ [React docs](https://reactjs.org/docs/hooks-reference.html#usedebugvalue)

Though it doesn't effect your application logic in anyway, this hook can negatively effect performance in certain cases if you're not careful (more on this later).

### Anatomy of useDebugValue

First things first, let's see what `useDebugValue` looks like in action:

{% codesandbox hooksusedebugvalue-ccnju %}

In the snippet above, we've defined our own custom hook, `useDate` (more about these in an upcoming article). Currently, the hook fires once on `App`'s initial render -- due to the empty dependency array -- and displays it on the page.

Note that we're also using a `useDebugValue` hook within `useDate`, which takes a single value and then displays it in the [React DevTools](https://github.com/facebook/react-devtools). In the screenshot below, you can see how the snippet above would look in your browser.

![useDebugValue output in React DevTools](https://ryanharris.dev/static/29c9f2007c8563e6c17f5ba61573cc04/1f09d/01-debug-value-before-after.png)

### Formatting useDebugValue

`useDebugValue` also takes an optional second argument, which can be used to format the hook's display value. In this case, the function's signature would look like this:

```javascript
useDebugValue(date, date => date.toDateString().toUpperCase())
```

The hook works the same way it does without the second argument, however, it's output now looks like this:

![Formatted useDebugValue output in React DevTools](https://ryanharris.dev/static/db33076790b111f0ce9bd96d33ba06c9/f96db/02-upper-case.png)

### Notes about the formatting function

As I mentioned in the intro, while this hook does not effect how your application works, it can effect performance if the logic within the formatter function is expensive.

Luckily, the React team built in a safeguard for this and, [as it says in the documentation](https://reactjs.org/docs/hooks-reference.html#defer-formatting-debug-values), the function will only be executed when you are inspecting your hooks within the dev tools.

Though use-cases for a complex formatter function may be few and far between, be careful about the logic you house within it so as to avoid unintended performance issues.

### Real-world use case

Odds are you won't be using `useDebugValue` too much in your day to day work unless you're building custom hooks or an open source library.

Since custom hooks are built using the standard hooks provided by React, `useDebugValue` is primarily a nice solution to help you debug the internals of your hook implementation in the React Dev Tools pane, as opposed to adding `console.log()` calls everywhere.