How To Use useDebugValue Hook In React? See Example

useDebugValue allows you to display debug information for custom hooks in React DevTools.
It is only for development and does not affect production performance.

---

Basic Syntax

useDebugValue(value, formatFunction);

• value → value to display
• formatFunction → optional function to format value

---

Example: Custom Hook with Debug Value

import React, { useState, useDebugValue } from "react";

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);

  useDebugValue(count > 5 ? `High: ${count}` : `Low: ${count}`);

  return [count, setCount];
}

function App() {
  const [count, setCount] = useCounter(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default App;

✅ DevTools will show High: count or Low: count based on value.

---

Key Points

• Only useful in custom hooks
• Improves debugging and state tracking
• Does not impact production performance
• Optional formatter function for better display

---

Conclusion

useDebugValue is a developer tool to track and debug custom hook values efficiently during development.

---

Citations

https://savanka.com/category/learn/react/
https://www.w3schools.com/REACT/DEFAULT.ASP