React Hooks Part 6: useId, useTransition, and useDeferredValue

React 18 and concurrent features

React 18 introduced concurrent rendering — the ability to interrupt, pause, and resume renders. Three new hooks expose this system to user-land code.

useId — stable, unique IDs

Generating unique IDs in React used to be tricky: Math.random() breaks server-side rendering because the server and client produce different values, causing hydration mismatches.

useId generates an ID that is stable across server and client.

import { useId } from 'react'

function PasswordField() {
  const id = useId()

  return (
    <div>
      <label htmlFor={id}>Password</label>
      <input id={id} type="password" />
    </div>
  )
}

If you need multiple related IDs in one component, extend with a suffix:

function Form() {
  const id = useId()

  return (
    <form>
      <label htmlFor={`${id}-name`}>Name</label>
      <input id={`${id}-name`} />

      <label htmlFor={`${id}-email`}>Email</label>
      <input id={`${id}-email`} />
    </form>
  )
}

Never use useId for keys in lists — it's for DOM accessibility attributes only.

useTransition — non-blocking state updates

Some state updates are urgent (typing, clicking) and some are not (filtering a large list, navigating to a new page). useTransition lets you tell React: "this update is low priority — don't block the UI for it."

import { useState, useTransition } from 'react'

function SearchPage() {
  const [query, setQuery]   = useState('')
  const [results, setResults] = useState([])
  const [isPending, startTransition] = useTransition()

  const handleChange = e => {
    const q = e.target.value
    setQuery(q)  // urgent: update input immediately

    startTransition(() => {
      setResults(heavyFilter(q))  // non-urgent: can be interrupted
    })
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <p>Updating…</p>}
      <ResultList results={results} />
    </>
  )
}

While the transition is pending, React can still respond to new user input — it will abort the in-progress render and start fresh with the newer value.

When to use

• Tab switching that renders large content
• Filtering or sorting large data sets
• Route navigations (React Router uses this internally in v6.4+)

useDeferredValue — defer expensive renders

useDeferredValue is the value-level counterpart to useTransition. Instead of wrapping a state setter, you wrap a value and tell React it's okay to use a stale copy while computing the fresh one.

import { useState, useDeferredValue, memo } from 'react'

const HeavyList = memo(function HeavyList({ query }) {
  // Expensive render
  const items = computeItems(query)
  return <ul>{items.map(i => <li key={i.id}>{i.name}</li>)}</ul>
})

function App() {
  const [query, setQuery] = useState('')
  const deferredQuery = useDeferredValue(query)

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <HeavyList query={deferredQuery} />
    </>
  )
}

The input (query) updates instantly on every keystroke. HeavyList receives deferredQuery, which lags behind until React has time to re-render it without blocking.

useTransition vs useDeferredValue

// Show stale indicator
const isStale = query !== deferredQuery
<HeavyList query={deferredQuery} style={{ opacity: isStale ? 0.5 : 1 }} />

Key takeaways

• useId — stable IDs for accessibility, safe in SSR.
• useTransition — mark a setter call as non-urgent; get an isPending flag.
• useDeferredValue — defer a value downstream without touching the setter.
• All three are opt-in — you only add them where the UX improvement is noticeable.