Summary - Concurrent features

Write a fluid list with useDeferredValue on a search input.

Summary - Concurrent features

In this group you learned Concurrent React and the useTransition and useDeferredValue hooks.

Concurrent rendering makes rendering interruptible; urgent updates run immediately and heavy updates in the background. This keeps user input smooth.

Even with large lists the app does not freeze; the user gets a smooth experience. Now you will write a concurrent search component.

Exercise Write the ConcurrentSearch component

Write ConcurrentSearch. Take an items prop. Keep query with useState(''), get deferred with useDeferredValue(query), compute items.filter(i => i.includes(deferred)) with useMemo. Show <input value={query} onChange={e => setQuery(e.target.value)} /> and inside a <ul> map results to <li key={i}>{r}</li>. Export it.

Show example solution

import { useState, useDeferredValue, useMemo } from 'react';

function ConcurrentSearch({ items }) {
  const [query, setQuery] = useState('');
  const deferred = useDeferredValue(query);
  const results = useMemo(() => items.filter(i => i.includes(deferred)), [items, deferred]);
  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <ul>{results.map((r, i) => <li key={i}>{r}</li>)}</ul>
    </div>
  );
}
export default ConcurrentSearch;

Test yourself

Which is wrong?
- Concurrent blocks rendering
- useDeferredValue delays a value
- isPending gives the pending state
- useTransition marks a deferred update
Show answer

Concurrent blocks rendering — Concurrent does not block; it makes rendering interruptible.

Fill in the blank: compute with useMemo

const results = ____(() => items.filter(i => i.includes(deferredQuery)), [items, deferredQuery]);

Show answer

const results = useMemo(() => items.filter(i => i.includes(deferredQuery)), [items, deferredQuery]);

Match concepts

useTransition

Deferred update
useDeferredValue

Delays a value
Concurrent

Makes render interruptible
isPending

Pending state

Next lesson: What is the reconciler?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies