Challenge: Concurrent search

Write a search that stays fluid with useDeferredValue.

Challenge: Concurrent search

In this challenge you will write a concurrent search box with useTransition. The search runs in the background while the input stays smooth.

With isPending a loading indicator is shown during the wait. Results are listed. Even with large lists the app does not freeze. As the user types the results update gradually.

Exercise Write the SearchBox component

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

Show example solution

import { useState, useTransition } from 'react';

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

Test yourself

What does useTransition return?
- [state, setState]
- [value, setValue]
- [isPending, startTransition]
- [ref, setRef]
Show answer

[isPending, startTransition] — useTransition returns [isPending, startTransition].

Fill in the blank: transition inside input onChange

<input value={query} onChange={e => ____(() => setQuery(e.target.value))} />

Show answer

<input value={query} onChange={e => startTransition(() => setQuery(e.target.value))} />

Next lesson: Challenge: Streaming page

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies