useDeferredValue lets React delay updating a value for non-urgent renders, while keeping the UI responsive.

React immediately updates the UI using search, and in the background updates parts that depend on deferredValue.

const [search, setSearch] = useState('')
const deferredSearch = useDeferredValue(search)

Use search for the input Use deferredSearch for heavy rendering or fetching

Practical Example

function PokemonSearch() {
  const [search, setSearch] = useState('')
  const deferredSearch = useDeferredValue(search)

  const pokemons = use(searchPokemons(deferredSearch))
  const isPending = deferredSearch !== search

  return (
    <>
      <input
        value={search}
        onChange={e => setSearch(e.target.value)}
        placeholder="Search pokemons..."
      />
      {isPending && <span>Loading...</span>}
      <ul>
        {pokemons.map(p => <li key={p.id}>{p.name}</li>)}
      </ul>
    </>
  )
}

✔ Typing stays instant.
✔ Fetching can suspend.
✔ UI feels smooth.

Use:

• useTransition → for navigation and view changes
• useDeferredValue → for inputs and filters