Concurrent features

Make a heavy filter low priority with useTransition.

Concurrent features

In the last step you add concurrent search to the project. The SearchPanel component does the search in the background with useTransition; the input stays smooth.

The starting code includes the previous three solutions. This lesson only adds SearchPanel. So the design system, theme, server page and concurrent search merge in one project.

With isPending a loading indicator is shown during the wait.

Pending with isPending

While isPending is true you show a waiting indicator to the user. This signals that the search is running in the background. The indicator should be short and meaningful; the user must know what they are waiting for. When the search finishes the indicator disappears and the result list appears. This keeps the app looking responsive and the user experience uninterrupted.

Exercise Write the SearchPanel component

Write SearchPanel. Import useState and useTransition. Keep query with useState(''), get isPending and startTransition from useTransition. Compute items.filter(i => i.name.includes(query)) as filtered. Show <input value={query} onChange={e => startTransition(() => setQuery(e.target.value))} /> and isPending ? <p>Searching</p> : <ul>{filtered.map(...)}</ul>. Export it.

Show example solution

import { useState, useTransition } from 'react';

function SearchPanel({ items }) {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  const filtered = items.filter(i => i.name.includes(query));
  return (
    <div>
      <input value={query} onChange={e => startTransition(() => setQuery(e.target.value))} />
      {isPending ? <p>Searching</p> : <ul>{filtered.map(i => <li key={i.id}>{i.name}</li>)}</ul>}
    </div>
  );
}
export default SearchPanel;

Test yourself

Which hook does SearchPanel use?
- useTransition
- useRef
- useReducer
- useEffect
Show answer

useTransition — useTransition runs the search in the background.

Fill in the blank: start a transition

const [isPending, startTransition] = use____();

Show answer

const [isPending, startTransition] = useTransition();

Match concurrent concepts

useTransition

Deferred update
isPending

Pending state
startTransition

Wraps the update
input

Stays smooth

Next lesson: Challenge: Page with server components

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies