Why it matters
Browsers cap live WebGL contexts at roughly 8–16 per page and silently evict the oldest one, so lists of shader avatars/cards go blank. Each context also costs GPU memory and a render loop.
How to fix it
Render one shared canvas (e.g. a single with many meshes, or @react-three/drei View), use a static frame/CSS gradient per item, or mount the WebGL piece only for the hovered/visible item.
Example
// one context, many views
<Canvas eventSource={ref}><View.Port /></Canvas>
{items.map((i) => <View key={i.id}><Orb seed={i.id} /></View>)}References
More lint rules
void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.
script-strategyThird-party script loads too earlybrowser-global-in-renderBrowser global (`window`, `document`, `navigator`, `localStorage`) at module scope or during rendertimer-in-render`setTimeout` / `setInterval` called in a component bodymotionvalue-subscribe-in-renderMotionValue `.on("change")` subscription in a component bodyraf-without-cancel`requestAnimationFrame` loop in an effect without `cancelAnimationFrame`listener-without-cleanupEvent listener or interval added in an effect without cleanupscroll-listener-nonpassive`wheel` / `touchstart` / `touchmove` listener without `{ passive: true }`unload-listener`unload` event listener