My Dashboard page needs two things: the stats for the cards, and the five most recent users for the table underneath. Here's exactly how it loads them:

useEffect (() => { let cancelled = false ;

async function load () { try { const [ statsRes , usersRes ] = await Promise . all ([ client . get ( ' /dashboard/stats ' ), isAdmin ? client . get ( ' /users ' , { params : { per_page : 5 } }) : Promise . resolve ( null ), ]); if ( cancelled ) return ; setStats ( statsRes . data ); if ( usersRes ) setRecentUsers ( usersRes . data . data ?? []); } catch ( err ) { if ( ! cancelled ) setError ( err . response ?. data ?. message || ' Failed to load dashboard data. ' ); } finally { if ( ! cancelled ) setLoading ( false ); } }

load (); return () => { cancelled = true ; }; }, [ isAdmin ]);

Enter fullscreen mode

Exit fullscreen mode

Three decisions in here that I reuse on every page of the kit:

One: parallel fetches with Promise.all .…