Wiring It All Together

The shape. Set loading and clear the previous error before asking. On success, store the data. On failure, store a message. Either way, stop loading.

That last part is what people forget. A request that fails and leaves loading set to true shows a spinner forever, which is the worst of the four states because it never resolves into anything.

Try it

Remove the .finally and search for boom. The error appears and the spinner never leaves.

loading editor…

loading React…

Type boom to see the error path, none to see the empty path, anything else for results.

◈ Graded Component

Wire up a request lifecycle. A button with id go starts a search using the provided search() function, which resolves after a moment. While it is in flight, an element with id state must read Loading. When it succeeds, that element must read the number of results, for example 2 results. When the query is the word boom, search rejects and the element must read Something went wrong. Use the input with id q for the query.

Checked against what your component renders and how it responds, not against how you wrote it. 2 visible and 4 hidden checks.

loading editor…

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Practice Test →

← Back