Skip to content

Commit 8b333fd

Browse files
authored
Merge pull request #1570 from bvaughn/useDebugValue-formatterFn
Added useDebugValue formatter function
2 parents b38c572 + 0ace70f commit 8b333fd

File tree

1 file changed

+11
-0
lines changed

1 file changed

+11
-0
lines changed

content/docs/hooks-reference.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -384,3 +384,14 @@ function useFriendStatus(friendID) {
384384
> Tip
385385
>
386386
> We don't recommend adding debug values to every custom hook. It's most valuable for custom hooks that are part of shared libraries.
387+
388+
#### Defer formatting debug values
389+
390+
In some cases formatting a value for display might be an expensive operation. It's also unnecessary unless a hook is actually inspected.
391+
392+
For this reason `useDebugValue` accepts a formatting function as an optional second parameter. This function is only called if the hooks is inspected. It receives the debug value as a parameter and should return a formatted display value.
393+
394+
For example a custom hook that returned a `Date` value could avoid calling the `toDateString` function unnecessarily by passing the following formatter:
395+
```js
396+
useDebugValue(date, date => date.toDateString());
397+
```

0 commit comments

Comments
 (0)