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
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>;}ReactDOM.render(<App/>,document.querySelector("div"));

React DevTolols can be installed for Chrome in Chrome Web Store. It can be brought up by pressing F12 and then navigating to the Components or Profiler tab.