useDebugValue hooks

useId hooks

useDebugValue is a React Hook that lets you add a label to a custom Hook in React DevTools. The hook allows library authors to customize the label displayed by React DevTools for custom hooks.

Syntax:

useDebugValue(value, format?)

Parameters

value: The value you want to display in React DevTools. It can have any type.
optional format: A formatting function. When the component is inspected, React DevTools will call the formatting function with the value as the argument, and then display the returned formatted value.

Return Type:

useDebugValue do not return anything.

Usage

Adding a label to a custom Hook
Deferring formatting of a debug value

Example: In this example, useDebugValue is used inside the useFetchData custom hook to provide debugging information about the loading status.

Javascript

import React, { useState, useEffect, useDebugValue } from 'react'; 
  
const url = 'https://api.sampleapis.com/coffee/hot'; 
  
// Custom hook to fetch data and log its status for debugging 
function useFetchData(url) { 
    const [data, setData] = useState(null); 
    const [loading, setLoading] = useState(true); 
  
    useEffect(() => { 
        async function fetchData() { 
            try { 
                const response = await fetch(url); 
                const result = await response.json(); 
                setData(result); 
            } catch (error) { 
                console.error('Error fetching data:', error); 
            } finally { 
                setLoading(false); 
            } 
        } 
        fetchData(); 
    }, [url]); 
  
    // Provide debugging information about loading status 
    useDebugValue(loading ? 'Loading...' : 'Data loaded'); 
  
    return data; 
} 
  
// Component using the custom hook 
function App() { 
    const data = useFetchData(url); 
  
    if (!data) { 
        return ( 
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}> 
                <div style={{ fontSize: '24px' }}>Loading...</div> 
            </div> 
        ); 
    } 
  
    return ( 
        <div> 
            <h1>Data Loaded!</h1> 
            <pre>{JSON.stringify(data, null, 2)}</pre> 
        </div> 
    ); 
} 
  
export default App; 

Output:

Output

Other Hooks in React

React provides specialized built-in hooks for building reusable components and libraries. While they are used less, these hooks are important in providing library authors to create robust and user-friendly applications. Among these specialized hooks are useDebugValue and useId, that provides unique functionalities that enhance the developer experience and facilitate the creation of reusable and accessible components. In this article, we’ll look into these hooks.

We will learn about the following Other Hooks in React

Table of Content

useDebugValue hooks
useId hooks

Tags:

#React-Hooks #ReactJS #Web Technologies