Keep typing urgentKeep typing urgent

Search 10,000 pages

Type quickly in each box. Bars show key-to-paint time.

const [query, setQuery] = useState('')
const deferredQuery = useDeferredValue(query)
const filtered = useMemo(
  () => items.filter(i => fuzzyMatch(i, deferredQuery)),
  [items, deferredQuery]
)
const isStale = query !== deferredQuery

return (
  <>
    <input value={query} onChange={e => setQuery(e.target.value)} />
    <div style={{ opacity: isStale ? 0.7 : 1 }}>
      <ResultsList results={filtered} />
    </div>
  </>
)

Scroll driving a heavy chart

Scroll each list, or press Auto-scroll.

import { startTransition } from 'react'

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0)
  useEffect(() => {
    const handler = () => {
      startTransition(() => setScrollY(window.scrollY))
    }
    window.addEventListener('scroll', handler, { passive: true })
    return () => window.removeEventListener('scroll', handler)
  }, [])
}

Loading flag vs isPending

Type fast. Both panes get identical requests and latencies.

const [query, setQuery] = useState('')
const [results, setResults] = useState([])
const [isPending, startTransition] = useTransition()
const latest = useRef('')

const handleSearch = (value) => {
  setQuery(value)
  latest.current = value
  startTransition(async () => {
    const data = await fetchResults(value)
    if (value !== latest.current) return
    startTransition(() => setResults(data))
  })
}

{isPending && <Spinner />}

Why it matters, pros and cons