What is the role of React Fiber?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import { useState, useTransition } from 'react';

export default function Search({ rows }) {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState(rows);
  const [isPending, startTransition] = useTransition();

  function onChange(e) {
    const value = e.target.value;
    setQuery(value);                 // urgent: keep the input responsive
    startTransition(() => {          // interruptible: can be discarded
      setResults(rows.filter(r => r.name.includes(value)));
    });
  }

  return (
    <>
      <input value={query} onChange={onChange} />
      {isPending && <p>Filtering…</p>}
      <ul>{results.slice(0, 50).map(r => <li key={r.id}>{r.name}</li>)}</ul>
    </>
  );
}