React Concurrent Features

Concurrent features improve responsiveness.

useTransition

Keep UI responsive during updates:

```javascript 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:

```javascript 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!