Coordinated React practice
The final intermediate review combines list identity, controlled input, shared state, and external synchronization. Cove Logistics has new records and Vale Media supplies the hidden batch. Edits must stay attached to their record after a reorder, shared controls must agree in both directions, and an unmounted subscription must stop responding. These are earlier patterns on fresh inputs. Trace ownership first: which component owns the state, which record owns the row, and which Effect owns the external listener. Then test the transition that could leave stale work behind. The answer is complete when the second action and the boundary case are as reliable as the initial screen.
<div id="root"></div>
body{font:16px/1.5 system-ui,sans-serif;color:#17243b;background:#fff;margin:20px}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer}main{max-width:100%}[hidden]{display:none!important}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.card{border:1px solid #94a3b8;padding:12px;min-width:0;overflow-wrap:anywhere}label{display:block}input,select{box-sizing:border-box;max-width:100%}ul{padding-left:24px}@media(max-width:600px){.cards{grid-template-columns:1fr}}
function Row({item}){const [note,setNote]=React.useState(item.name);return <li data-id={item.id}><label>Note {item.id}<input value={note} onChange={e=>setNote(e.target.value)}/></label></li>;}function App(){const [items,setItems]=React.useState(fixture.items);return <><button onClick={()=>setItems(rows=>[...rows].reverse())}>Reverse</button><ul>{items.map((item,index)=><Row key={item.id} item={item}/>)}</ul></>;}
ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
Read the markup and styles together, then trace the resulting control or layout.