Loading, errors and retry

Opening your lesson

A request has several visible states. Before it starts, the user needs a control. While it runs, the page needs a loading status. Success can contain rows or an empty result; a failure needs a readable message and a route to retry. A boolean called loading cannot describe all those outcomes on its own.

You'll load records from the preview's mocked API. Keep the response rows separate from the request state, and clear stale rows when a new request starts. The task includes a control that makes the next request fail, so you can test recovery deliberately. Later fixtures change the returned labels and amounts. Render the response rather than a sample list, and keep error feedback accessible through an alert.

function App(){const [state,setState]=useState('idle'),[rows,setRows]=useState([]);const fail=useRef(false);async function load(){setState('loading');setRows([]);try{if(fail.current){fail.current=false;throw Error('failure')}const response=await fetch('/records');if(!response.ok)throw Error('status');setRows(await response.json());setState('ready')}catch{setState('error')}}return <><h1>{f.organization}</h1><button onClick={load}>Load records</button><button onClick={()=>{fail.current=true}}>Fail next request</button>{state==='loading'&&<p role="status">Loading records</p>}{state==='error'&&<><p role="alert">Records unavailable</p><button onClick={load}>Retry</button></>}{state==='ready'&&rows.length===0&&<p role="status">No records</p>}<ul>{rows.map(row=><li key={row.id}>{row.label}</li>)}</ul></>}

Trace the state change and its visible boundary before building the transfer tasks.

Choose your character

Your Work Gym account