useTransition and useDeferredValue

Non-urgent Updates

Typing must feel instant, but re-rendering a huge list can wait. useTransition marks a state update as low priority; useDeferredValue gives you a "lagging" copy of a value.

Example

The input stays responsive; the list shows "Updating..." while the slow render is pending.

import { useState, useTransition } from 'react';

const items = Array.from({ length: 20000 }, (_, i) => 'Item ' + i);

export default function App() {
  const [text, setText] = useState('');
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const onChange = (e) => {
    setText(e.target.value);                         // urgent
    startTransition(() => setQuery(e.target.value)); // can wait
  };
  const shown = items.filter((i) => i.includes(query)).slice(0, 5);
  return (
    <div>
      <input value={text} onChange={onChange} placeholder="Filter 20,000 items" />
      {isPending ? <p>Updating...</p> : <ul>{shown.map((i) => <li key={i}>{i}</li>)}</ul>}
    </div>
  );
}

Result

useDeferredValue

const deferredQuery = useDeferredValue(query);
// render the heavy list with deferredQuery; the input uses query
<SlowList query={deferredQuery} />