RxJS streams vs query caches and effects

A chat app's member search. The Angular version:

The React port:

function useDebouncedValue(value, ms) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), ms);
    return () => clearTimeout(id);
  }, [value, ms]);
  return debounced;
}

function MemberSearch() {
  const [text, setText] = useState('');
  const q = useDebouncedValue(text, 300);
  const { data = [] } = useQuery({
    queryKey: ['members', q],
    queryFn: () => fetch(`/api/members?q=${q}`).then((r) => r.json()),
    enabled: q !== '',
  });
  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <ul>{data.map((m) => <li key={m}>{m}</li>)}</ul>
    </>
  );
}

In both, a user types s, sa and sam at 0, 100 and 200 ms, then pastes samir at 600 ms. The server takes 700 ms to answer each search.

A ticket site's event search; picking a recent search fills the box at once. The Angular version:

The React port:

function EventSearch() {
  const [q, setQ] = useState('');
  const { data = [] } = useQuery({
    queryKey: ['events', q],
    queryFn: ({ signal }) => fetch(`/api/events?q=${q}`, { signal }).then((r) => r.json()),
    staleTime: 30_000,
    enabled: q !== '',
  });
  return (
    <>
      <input value={q} onChange={(e) => setQ(e.target.value)} />
      <ul>{data.map((ev) => <li key={ev}>{ev}</li>)}</ul>
    </>
  );
}

In both, a fan picks rock, jazz and rock again from her recent searches, at 0, 5 and 10 seconds. The server answers each search in 400 ms.

A payments ledger's risk panel shows card authorisations as they arrive over a socket. The Angular version:

The React port gets the list received so far as a prop:

function useDebouncedValue(value, ms) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), ms);
    return () => clearTimeout(id);
  }, [value, ms]);
  return debounced;
}

function RiskPanel({ auths }) {
  const shown = useDebouncedValue(auths, 1000);
  return <p>{shown.length} authorisations</p>;
}

Authorisations arrive every 200 ms, from 100 ms to 2900 ms.

Port t1's candidate search to React from a blank file: a useDebouncedValue(value, ms) hook and a CandidateSearch component with an input and a list, so that typing waits 300 ms of quiet, a superseded request is aborted, and an empty box sends nothing.

An interviewer says: "Your chat client's Angular code has a member search (debounceTime, switchMap, HTTP) and a typing indicator fed by the socket (filter, bufferTime). Tell me whether you would keep RxJS in the React version".

A podcast app's episode search. The Angular version:

The React port:

function useDebouncedValue(value, ms) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), ms);
    return () => clearTimeout(id);
  }, [value, ms]);
  return debounced;
}

function EpisodeSearch() {
  const [text, setText] = useState('');
  const q = useDebouncedValue(text, 300);
  const { data = [] } = useQuery({
    queryKey: ['episodes', q],
    queryFn: ({ signal }) => fetch(`/api/episodes?q=${q}`, { signal }).then((r) => r.json()),
    enabled: q !== '',
  });
  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <ul>{data.map((ep) => <li key={ep}>{ep}</li>)}</ul>
    </>
  );
}

In both, a listener pastes bebop at 0 ms, reads the list, then clears the box at 1500 ms and leaves it empty. The server answers each search in 200 ms.

A chat app's Angular channel search:

A user types de at 0 ms and, after a pause, pastes design at 500 ms. The server answers de in 900 ms and design in 200 ms.

A video app's catalogue search. The Angular version:

The React port:

function useDebouncedValue(value, ms) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), ms);
    return () => clearTimeout(id);
  }, [value, ms]);
  return debounced;
}

function VideoSearch() {
  const [text, setText] = useState('');
  const q = useDebouncedValue(text, 300);
  const { data = [] } = useQuery({
    queryKey: ['videos', q],
    queryFn: ({ signal }) => fetch(`/api/videos?q=${q}`, { signal }).then((r) => r.json()),
    enabled: q !== '',
  });
  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <ul>{data.map((v) => <li key={v}>{v}</li>)}</ul>
    </>
  );
}

In both, a viewer types jazz (keys at 0, 100, 200 and 300 ms) and reads the results. At 2000 ms she types a fifth z by mistake and deletes it at 2100 ms. The server answers each search in 200 ms.