Module 2 · State, effects and live data Lesson 6 of 15

Loading, error and empty states

Worked example

if (loading) return <Spinner />; if (error) return <ErrorBox message={error} />; if (!items.length) return <EmptyState />; — four lines that turn a demo into something a team could ship.

Your practice task

Switch your phone to flight mode and reload your app, then make sure the error state explains what happened and offers a retry.

Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.

Key takeaway

Every network screen has four states: loading, error, empty and loaded. A fresher portfolio shows only the fourth, and interviewers notice immediately.

Almost there

15 lessons left of 15

Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.

Next recommended course Full-Stack Web Development Bootcamp