From 0ace70f43da6b4c713bf22d44ed5972692210c9e Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Thu, 17 Jan 2019 10:48:10 -0800 Subject: [PATCH] Added useDebugValue formatter function --- content/docs/hooks-reference.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 17472727b6e..d51e235b184 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -384,3 +384,14 @@ function useFriendStatus(friendID) { > Tip > > We don't recommend adding debug values to every custom hook. It's most valuable for custom hooks that are part of shared libraries. + +#### Defer formatting debug values + +In some cases formatting a value for display might be an expensive operation. It's also unnecessary unless a hook is actually inspected. + +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. + +For example a custom hook that returned a `Date` value could avoid calling the `toDateString` function unnecessarily by passing the following formatter: +```js +useDebugValue(date, date => date.toDateString()); +```