← Alle AufgabenReact · Senior

Suche ohne Race Conditions

Schreib einen Hook useSearch(query, search). search(query) liefert ein Promise mit einem Array von Ergebnissen. Der Hook liefert { results, loading }: solange eine Anfrage läuft, ist loading gleich true.

Antworten können in anderer Reihenfolge ankommen, als die Anfragen gesendet wurden. Gezeigt werden soll nur das Ergebnis für die aktuelle query: eine veraltete Antwort, die später ankommt, darf es nicht überschreiben. Für eine leere query gilt results = [], ohne search aufzurufen.

function useSearch(query, search) {
  // search(query) returns a promise of results
  // return { results, loading }
}

Strg+Enter führt die Tests aus. Tab rückt ein; um den Editor per Tastatur zu verlassen, drücke Esc und dann Tab. Der Code wird in diesem Browser gespeichert.

Tests (4)

const search = (q) => Promise.resolve([q + '1']);
const { result } = renderHook(({ q }) => useSearch(q, search), { initialProps: { q: 'a' } });
await waitFor(() => expect(result.current.results).toEqual(['a1']));
expect(result.current.loading).toBe(false);

const search = () => new Promise(() => {});
const { result } = renderHook(({ q }) => useSearch(q, search), { initialProps: { q: 'a' } });
await waitFor(() => expect(result.current.loading).toBe(true));

const pending = {};
const search = (q) => new Promise((resolve) => { pending[q] = resolve; });
const { result, rerender } = renderHook(({ q }) => useSearch(q, search), { initialProps: { q: 'a' } });
await waitFor(() => expect(typeof pending.a).toBe('function'));
rerender({ q: 'ab' });
await waitFor(() => expect(typeof pending.ab).toBe('function'));
pending.ab(['AB']);
await waitFor(() => expect(result.current.results).toEqual(['AB']));
pending.a(['A']);
await wait(30);
expect(result.current.results).toEqual(['AB']);

const search = fn(() => Promise.resolve(['x']));
const { result } = renderHook(({ q }) => useSearch(q, search), { initialProps: { q: '' } });
await wait(30);
expect(search).toHaveBeenCalledTimes(0);
expect(result.current.results).toEqual([]);
expect(result.current.loading).toBe(false);