React useId & useDebugValue: Accessibility & DevTools Inspection

Building accessible, accessible-ready applications and maintaining clear developer tooling are marks of professional React engineering. In this tutorial, we examine two specialized hooks: useId (for WCAG-compliant form accessibility) and useDebugValue (for React DevTools).

1. useId: Flawless HTML Form Accessibility

In HTML, connecting a <label> to an <input> requires matching htmlFor and id attributes. When a component is reused multiple times on the same page, hardcoded IDs create duplicate ID collisions in the DOM. useId generates unique, deterministic strings:

import React, { useId } from 'react';

function AccessibleFormField({ label, type = "text" }) {
  // Generates stable unique ID like: :r0:, :r1:
  const fieldId = useId();

  return (
    <div className="form-group" style={{ marginBottom: '15px' }}>
      <label htmlFor={fieldId}>{label}</label>
      <input id={fieldId} type={type} className="form-input" />
    </div>
  );
}

// Reused across the page with ZERO ID collisions!
function RegistrationForm() {
  return (
    <form>
      <AccessibleFormField label="First Name:" />
      <AccessibleFormField label="Last Name:" />
      <AccessibleFormField label="Email:" type="email" />
    </form>
  );
}

2. useDebugValue: Enhancing React DevTools Inspection

When authoring shared custom hooks in large engineering teams, useDebugValue provides human-readable status labels directly inside the DevTools panel:

import { useState, useEffect, useDebugValue } from 'react';

export function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  // Displays "OnlineStatus: Active (Online)" inside React DevTools!
  useDebugValue(isOnline ? 'Active (Online)' : 'Disconnected (Offline)');

  return isOnline;
}