Aabha · Frontend foundations

React with TypeScript · Harbor Together

Practice 08 · Async outcomes

A. Follow every state

Use checkpoint 08 to load normal, empty, malformed and wrong-shape fixtures. For each, record the visible status and whether cards appear. Retry a bad fixture, then recover by selecting normal data. Explain the difference between an empty successful dataset and a filtered zero-match result.

B. Repair a race

Request A starts; the learner selects B; B resolves; A resolves later. A naive loader commits both results. Draw the incorrect timeline and the intended timeline. Add cleanup and an obsolete-work guard in a copy, or explain the supplied hook line by line. Show that an old rejection cannot replace the new success either.

C. Transfer

Add a deterministic test where a first request resolves after a second request. Assert that the second result remains visible. Add an HTTP-error case separate from malformed JSON. Do not use a real API or arbitrary sleep to force timing. Explain what your mock proves and what still needs a real-browser check.

Completion evidence: four fixture outcomes, retry/recovery, race timeline and deterministic evidence. Separate solutions. Then attempt assessment 02.