Deviopath › React

Profile Loader with Race Handling

Hard · Async

The helper fakeFetchUser(id) returns a Promise that settles after a delay that depends on the id: user 1 is slow, user 2 is fast. User 4 does not exist, so loading it always fails.

Render four buttons "User 1" to "User 4"; the selected one has the class active. User 1 is selected at the start. Whenever the selected user changes, load it:

- while loading: only <p className="status">Loading...</p> (hide the old profile)

- success: <h2 className="name">Ana</h2>

- failure: <p className="error">Could not load user 4</p> and a "Retry" button that loads the same user again

When the user clicks quickly, an older response can arrive after a newer one. Only show the response for the currently selected user and ignore the others.

Next: Chat Room Connection