useDebugValue

useDebugValue என்பது React DevTools-இல் custom Hook ஒன்றுக்கு label சேர்க்க உதவும் React Hook.

useDebugValue(value, format?)

Reference
- useDebugValue(value, format?)
Usage
- Custom Hook-க்கு label சேர்த்தல்
- Debug value formatting-ஐ தள்ளிப்போடுதல்

Reference

`useDebugValue(value, format?)`

வாசிக்கக்கூடிய debug value ஒன்றைக் காட்ட, உங்கள் custom Hook-இன் top level-இல் useDebugValue-ஐ அழைக்கவும்:

import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

மேலும் உதாரணங்களை கீழே பார்க்கவும்.

Parameters

value: React DevTools-இல் காட்ட விரும்பும் value. இது எந்த type-ஆகவும் இருக்கலாம்.
optional format: Formatting function. Component inspect செய்யப்படும் போது, React DevTools இந்த formatting function-ஐ value argument-உடன் அழைத்து, return செய்யப்படும் formatted value-ஐ (அதுவும் எந்த type-ஆகவும் இருக்கலாம்) காட்டும். Formatting function குறிப்பிடவில்லை என்றால், அசல் value தானே காட்டப்படும்.

Returns

useDebugValue எதையும் return செய்யாது.

Usage

Custom Hook-க்கு label சேர்த்தல்

React DevTools-க்காக வாசிக்கக்கூடிய debug value காட்ட, உங்கள் custom Hook-இன் top level-இல் useDebugValue-ஐ அழைக்கவும்.

import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

useOnlineStatus-ஐ அழைக்கும் components-ஐ inspect செய்யும்போது, அவற்றுக்கு OnlineStatus: "Online" போன்ற label கிடைக்கும்:

Debug value-ஐ காட்டும் React DevTools screenshot

useDebugValue call இல்லாமல், underlying data மட்டும் (இந்த உதாரணத்தில் true) காட்டப்படும்.

Fork

import { useSyncExternalStore, useDebugValue } from 'react';

export function useOnlineStatus() {
  const isOnline = useSyncExternalStore(subscribe, () => navigator.onLine, () => true);
  useDebugValue(isOnline ? 'Online' : 'Offline');
  return isOnline;
}

function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

Note

ஒவ்வொரு custom Hook-க்கும் debug values சேர்க்க வேண்டாம். Shared libraries-இன் பகுதியாக உள்ள, inspect செய்ய கடினமான complex internal data structure கொண்ட custom Hooks-க்கு இது மிகவும் மதிப்புடையது.

Debug value formatting-ஐ தள்ளிப்போடுதல்

useDebugValue-க்கு இரண்டாவது argument ஆக formatting function ஒன்றையும் pass செய்யலாம்:

useDebugValue(date, date => date.toDateString());

உங்கள் formatting function debug value-ஐ parameter ஆகப் பெற்று, formatted display value-ஐ return செய்ய வேண்டும். உங்கள் component inspect செய்யப்படும் போது, React DevTools இந்த function-ஐ அழைத்து அதன் result-ஐ காட்டும்.

Component உண்மையில் inspect செய்யப்படாவிட்டால் potentially expensive formatting logic ஓடுவதை இதனால் தவிர்க்கலாம். உதாரணமாக, date ஒரு Date value என்றால், ஒவ்வொரு render-க்கும் அதில் toDateString() அழைப்பதை இது தவிர்க்கிறது.

PrevioususeContext

NextuseDeferredValue