// MFE with multiple QueryClients
<QueryClientProvider client={clientA}>
 <SectionA />
</QueryClientProvider>
<QueryClientProvider client={clientB}>
 <SectionB />
</QueryClientProvider>

// Only the active tab should refresh
<Tabs>
 <TabPanel id="analytics"><AnalyticsPanel /></TabPanel>
 <TabPanel id="users"><UsersPanel /></TabPanel>
</Tabs>
// Widgets below the fold shouldn't fetch until scrolled into view
<Dashboard>
 <RevenueWidget /> {/* visible */}
 <OrdersWidget /> {/* not visible yet */}
</Dashboard>

function Widget() {
 const { ref, isFocused } = useComponentFocus({
 componentKey: 'revenue',
 invalidateOnFocus: true,
 })
 const { data } = useQuery({ queryKey: ['revenue'], queryFn: fetchRevenue })
 return <div ref={ref}>{data}</div>
}

function Dashboard() {
 const { registerComponent, focusGroup, blurGroup } = useComponentFocusGroup({
 groupKey: 'dashboard',
 componentKeys: ['a', 'b'],
 })
 return (
 <>
 <button onClick={focusGroup}>Refresh All</button>
 <div ref={registerComponent('a')}><WidgetA /></div>
 <div ref={registerComponent('b')}><WidgetB /></div>
 </>
 )
}

<ComponentFocus componentKey="revenue" invalidateOnFocus>
 <RevenueChart />
</ComponentFocus>

<ComponentFocusGroup groupKey="dashboard" componentKeys={['a', 'b']}>
 {({ registerComponent, focusGroup }) => (
 <>
 <button onClick={focusGroup}>Refresh All</button>
 <div ref={registerComponent('a')}><WidgetA /></div>
 <div ref={registerComponent('b')}><WidgetB /></div>
 </>
 )}
</ComponentFocusGroup>

<QueryClientProvider client={appClient}>
 <App />
</QueryClientProvider>
<QueryClientProvider client={widgetClient}>
 <AnalyticsWidget /> {/* loads data only when scrolled into view */}
</QueryClientProvider>

<QueryClientProvider client={paymentClient}>
 <PaymentSection /> {/* separate cache policy for sensitive data */}
</QueryClientProvider>
<QueryClientProvider client={mainClient}>
 <ContentSection />
</QueryClientProvider>

<QueryClientProvider client={teamAClient}>
 <Header />
</QueryClientProvider>
<QueryClientProvider client={teamBClient}>
 <Sidebar />
</QueryClientProvider>
<QueryClientProvider client={teamCClient}>
 <MainContent />
</QueryClientProvider>