Debug Custom React Hooks With useDebugValue

The useDebugValue hook will not effect your user experience but is instead aimed at improving the developer experience. When building your own custom hooks, useDebugValue can help you debug the hook's internal logic by displaying values in the React Dev Tools.

The hook takes two arguments: a value to be displayed in the developer console and an optional function you can use to format the aforementioned value. The function signature looks like this:

const name = 'ryan'

// Outputs 'ryan' to the developer console
useDebugValue(name);

// Outputs 'RYAN' to the developer console
useDebugValue(name, (name) => name.toUpperCase());