Отладка пользовательских хуков в React

useDebugValue() – это хук React, который позволяет разработчикам предоставлять дополнительную информацию о значении, возвращаемом пользовательским хуком, в инструментах разработчика React DevTools. Это упрощает отладку и понимание работы пользовательских хуков, особенно в сложных компонентах или библиотеках.

Как это работает:

Вы вызываете useDebugValue() внутри вашего пользовательского хука и передаете ему значение, которое хотите отобразить в DevTools. Дополнительно, вы можете передать функцию форматирования, которая преобразует значение в более удобный для чтения вид.

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ... логика для определения статуса друга ...

  useDebugValue(isOnline, (status) => status ?? 'Loading...');

  return isOnline;
}

В этом примере useDebugValue() отобразит в DevTools значение isOnline или строку "Loading...", если значение еще не получено.

👉 @sWebDev