React · Exercise 5 of 5 Previous
Advanced
Mini build: a user loader without races
Build a profile viewer with a <select id="user"> for users 1, 2 and 3, using the provided fetchUser(id) fake API (don't change it). User 1 is slow (800 ms), user 2 is fast (150 ms), and user 3 fails after 300 ms.
While loading, show <p id="status">Loading…</p>. On success show <p id="name"> with the user's name. On failure show <p role="alert"> with the error message.
It must be race-free: choosing user 1 and then quickly user 2 must end on Ravi, never on Asha. Use an ignore flag or an AbortController in the effect's cleanup.
What Check tests
- User 1 (Asha) is shown after loading
- Choosing a new user shows
Loading…right away - User 3 shows an error with
role="alert" - No race: user 1 then quickly user 2 ends on Ravi
- No errors in the console
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.