Infinite feeds and explicit pagination

Opening your lesson

An infinite feed appends records instead of replacing the current page. The reader should keep their place while more content appears. A viewport trigger is convenient, but a named Load more control gives keyboard users a predictable alternative and helps a test reproduce the same boundary. Both routes should call the same bounded append operation.

You'll render one record, append the next with a button, and append again when the feed reaches its bottom. Stop at the source length and announce that all records are loaded. Keep stable row identities and source order, including records loaded before the latest action. In a production viewport implementation, IntersectionObserver can trigger that same operation and must be disconnected on cleanup. This local exercise uses the scrollable region so each boundary remains repeatable.

function App(){const [count,setCount]=useState(1);function more(){setCount(n=>Math.min(f.rows.length,n+1))}return <><h1>Dispatch feed</h1><div role="region" aria-label="Feed" tabIndex={0} style={{height:90,overflowY:'auto'}} onScroll={e=>{const el=e.currentTarget;if(el.scrollTop+el.clientHeight>=el.scrollHeight-1)more()}}><ul>{f.rows.slice(0,count).map(r=><li style={{minHeight:100}} key={r.id}>{r.label}</li>)}</ul></div><button disabled={count>=f.rows.length} onClick={more}>Load more</button><p role="status">{count>=f.rows.length?'All records loaded':count+' records loaded'}</p></>}

Trace the control, state change and accessible output in the completed example.

Choose your character

Your Work Gym account