React Concurrent Features

Concurrent features improve responsiveness.

useTransition

Keep UI responsive during updates:

import { useState, useTransition } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setQuery(e.target.value);
    startTransition(() => {
      // Expensive update
      filterLargeList(e.target.value);
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <Results />
    </div>
  );
}

useDeferredValue

Defer less important updates:

import { useState, useDeferredValue } from 'react';

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

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

Remember

• useTransition: Mark updates as transitions
• useDeferredValue: Defer value updates
• Keeps UI responsive
• Use for expensive operations

Next: Learn advanced hooks!