useDebugValue

Adds a custom label to custom Hooks in React Developer Tools to simplify debugging. It should only be called inside custom Hooks and has zero performance overhead in production.

import { useState, useDebugValue } from 'react';

export const useAuth = () => {
    const [isAuthenticated, setAuthenticated] = useState(false);

    // Displays formatted label next to useAuth in React DevTools
    useDebugValue(isAuthenticated ? 'Authenticated' : 'Not Authenticated');

    return [isAuthenticated, setAuthenticated];
};