useDebugValue не отображается

Question

Я только что попытался использовать useDebugValue Hook . Я создал следующий код:

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 <div className="App">Hello World: {"" + isOnline}</div>;
}

export default App;

Мой код работает нормально: каждая секунда isOnline изменяется. Но где я вижу debugValue? Моя консоль выглядит следующим образом

Answer 1

Вы должны использовать его внутри пользовательского крючка:

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 <div className="App">Hello World: {"" + isOnline}</div>;
}

Демо