useId, useSyncExternalStore and useDebugValue

useId

Generates a unique id that is stable across server and client rendering.

import { useId } from 'react';
function EmailField() {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Email</label>
      <input id={id} type="email" />
    </div>
  );
}

Why not just write an id?

function EmailField() {
  return (
    <div>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" />
    </div>
  );
}

Render that component twice and you have two elements with id="email". Ids must be unique in a document, so clicking the second label focuses the first input.

useId gives each instance its own value, something like «r1» and «r2».

Why not Math.random()?

Because the server and the browser would generate different values, and hydration would fail with a mismatch warning. useId is designed to produce the same value on both sides.

One id, several elements

function PasswordField() {
  const id = useId();
  return (
    <div>
      <label htmlFor={`${id}-input`}>Password</label>
      <input
        id={`${id}-input`}
        type="password"
        aria-describedby={`${id}-hint`}
      />
      <p id={`${id}-hint`}>At least 8 characters</p>
    </div>
  );
}

Call useId once and add suffixes. Do not call it several times for related elements.

Not for list keys. useId is for accessibility attributes. List keys must come from your data, as covered in the lists topic.

useSyncExternalStore

Subscribes a component to a store that lives outside React.

Most of the time you will not call this directly. State libraries use it internally. But it is the correct way to read any external changing value, and it is worth knowing why.

import { useSyncExternalStore } from 'react';
function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}
function useOnlineStatus() {
  return useSyncExternalStore(
    subscribe,
    () => navigator.onLine,
    () => true
  );
}
function StatusBar() {
  const isOnline = useOnlineStatus();
  return <p>{isOnline ? 'Online' : 'Offline'}</p>;
}

Three arguments:

1. subscribe: takes a callback, calls it when the store changes, returns cleanup.
2. getSnapshot: reads the current value.
3. getServerSnapshot: the value to use during server rendering.

Why not useState plus useEffect?

function useOnlineStatusNaive() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  useEffect(() => {
    const update = () => setIsOnline(navigator.onLine);
    window.addEventListener('online', update);
    window.addEventListener('offline', update);
    return () => {
      window.removeEventListener('online', update);
      window.removeEventListener('offline', update);
    };
  }, []);
  return isOnline;
}

This works most of the time, and has two flaws:

• Between the first render and the effect running, the value can already be wrong.
• With concurrent rendering, different components can read different values in the same render, which is called tearing.

useSyncExternalStore reads the value during render and guarantees consistency.

A localStorage example

function useLocalStorage(key) {
  return useSyncExternalStore(
    (callback) => {
      window.addEventListener('storage', callback);
      return () => window.removeEventListener('storage', callback);
    },
    () => localStorage.getItem(key),
    () => null
  );
}

Now another tab changing that key updates this one.

getSnapshot must return a cached value. Returning a new object each call causes an infinite loop, because React compares with Object.is and always sees a change.

() => ({ online: navigator.onLine })
() => navigator.onLine

useDebugValue

Adds a label to a custom hook in React DevTools.

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

In DevTools the hook shows as OnlineStatus: "Online" instead of an unlabelled boolean. It does nothing in production.

For an expensive label, pass a formatter as a second argument so it only runs when someone actually inspects the component:

useDebugValue(date, (d) => d.toISOString());

This is purely a developer convenience. Use it in shared hooks that others will debug, and skip it elsewhere.

Quick recap

• useId produces unique ids that match between server and client.
• Call it once per component and add suffixes for related elements.
• Never use useId for list keys.
• useSyncExternalStore subscribes safely to values outside React.
• It avoids tearing, which useState plus useEffect does not.
• getSnapshot must return a stable value, never a fresh object.
• useDebugValue labels custom hooks in DevTools and is stripped in production.