useDebugValue not Displayed

Question

I just tried to use the useDebugValue Hook. I created the following code:

import React, { useState, useDebugValue, useEffect } from "react";
import "./App.css";

function App() {
  const [isOnline, setIsOnline] = useState(true);

  useDebugValue(isOnline ? "Online" : "Offline");

  useEffect(() => {
    const interval = setInterval(() => {
      setIsOnline(isOnline => !isOnline);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return Hello World: {"" + isOnline};
}

export default App;

My code works fine: each second isOnline is modified. But where do I see the debugValue? My Console looks like the following

user_5458200 · Answer

You should use it inside a custom hook:

import React from "react";
import "./styles.css";

function useFriendStatus() {
  const [isOnline, setIsOnline] = React.useState(true);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setIsOnline(isOnline => !isOnline);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  // Show a label in DevTools next to this Hook
  // e.g. "FriendStatus: Online"
  React.useDebugValue(isOnline ? "Online" : "Offline");

  return isOnline;
}

export default function App() {
  const isOnline = useFriendStatus();

  React.useDebugValue(isOnline ? "Online" : "Offline");

  return Hello World: {"" + isOnline};
}

Demo

useDebugValue not Displayed

1 Answers