Concurrent Rendering with useTransition

Snippet

Concurrent Rendering with useTransition

The useTransition hook allows you to mark state updates as non-urgent transitions. This prevents heavy computations from blocking the main thread, keeping the UI responsive during complex re-renders.

snippet.js
javascript
function SearchComponent() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
 
  const handleChange = (e) => {
    setQuery(e.target.value);
    startTransition(() => {
      const filtered = largeDataset.filter(item => item.includes(e.target.value));
      setResults(filtered);
    });
  };
 
  return (
    <div style={{ opacity: isPending ? 0.5 : 1 }}>
      <input type="text" onChange={handleChange} />
      {isPending && <p>Updating list...</p>}
      <ul>{results.map(r => <li key={r}>{r}</li>)}</ul>
    </div>
  );
}

react

Breakdown

const [isPending, startTransition] = useTransition();

Destructures the pending state flag and the function to start the transition.

startTransition(() => { ... });

Wraps the heavy state update (filtering) to mark it as lower priority.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Concurrent Rendering with useTransition

Related