MENU


UseDebugValue

If you have a custom hook, and you'd like to label it within React DevTools, then this is what you use.


RESETRUNFULL
<!DOCTYPE html><html><head>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head><body>
<div></div>
<script type="text/babel">
function useFriendStatus() {
  const [isOnline, setIsOnline] = React.useState(true);
  React.useEffect(() => {
    const interval = setInterval(() => {
      setIsOnline(isOnline => !isOnline);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  React.useDebugValue(isOnline ? "Online" : "Offline");
  return isOnline;}function App() {
  const isOnline = useFriendStatus();
  return <div className="App">Hello World: {"" + isOnline}</div>;}
const root = ReactDOM.createRoot(document.querySelector("div"));
root.render(<App/>);
</script>
</body></html>

React DevTools can be installed as a browser extension for Chrome, Firefox, or Edge. Once installed, open your browser's DevTools (press F12, or right-click and choose Inspect) and switch to the Components or Profiler tab.