How to use useDeferredValue to defer expensive re-renders

· Category: React

Short answer

useDeferredValue tells React that a piece of state is less urgent, allowing the UI to show stale data briefly while computing the new value in the background.

Steps

  1. Wrap a state value with useDeferredValue(value).
  2. Pass the deferred value to a slow component.
  3. React will keep the old value on screen until the new one is ready, avoiding jank.

Example

import { useState, useDeferredValue } from 'react';

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

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

Tips

  • Use it when a parent state update causes a child to render slowly.
  • It works best with React 18+ concurrent rendering.
  • Combine with useTransition for even more control over pending states.