Deviopath › React

Loading with Retry

Medium · Async

The helper fakeLoadQuote(attempt) returns a Promise that settles after 50ms. It fails when attempt is 1 and succeeds for every later attempt.

When the component mounts, load the quote with attempt 1 using useEffect:

- while loading, show <p>Loading...</p>

- on failure, show <p className="error">Could not load the quote.</p> and a "Retry" button

- "Retry" loads again with the next attempt number

- on success, show the quote in a <blockquote>

Tip: keep the attempt number in state and list it in the effect dependencies.

Next: Stopwatch with Laps