Back to Re-render Optimization
Subscribe to Derived State
rerenderderived-statemedia-queryoptimization
Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
React components often suffer from unnecessary re-renders when they track high-frequency data, such as raw window dimensions or mouse coordinates. The Subscribe to Derived State pattern optimizes performance by isolating the component from the volatile source data. Instead of observing a raw numeric or object value that fluctuates constantly, the component subscribes to a boolean or discrete flag derived from that source. This ensures the component logic only executes when a significant boundary is crossed—for instance, switching from desktop to mobile layout—rather than on every tick of the source data. By offloading the threshold evaluation to a specialized hook like useMediaQuery or a memoized subscriber, the UI remains responsive and avoids expensive DOM reconciliation triggered by irrelevant value shifts.
When to Use This Skill
- •Switching between mobile and desktop navigation menus
- •Enabling or disabling scroll-triggered UI animations
- •Toggling read-only states based on user permission flags
- •Conditional rendering of tooltips during window resize events
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “Optimize this component to stop re-rendering on window resize
- “How do I prevent unnecessary renders from continuous state updates?
- “Convert this numeric state check into a stable boolean subscription
- “Refactor this hook to only trigger updates at a specific viewport threshold
- “Implement derived state to fix performance lag during layout changes
What this skill does
- •Filters high-frequency data streams into stable boolean toggles
- •Prevents component re-renders during insignificant state mutations
- •Encapsulates threshold logic within reusable effect or state hooks
- •Decouples UI layout concerns from raw input sensitivity
- •Reduces layout thrashing by stabilizing prop updates
When not to use it
- ✕When the component needs access to the precise numeric value
- ✕When the derived state changes so frequently that it negates optimization benefits
Example workflow
- Identify a component currently tracking a continuously changing raw value
- Extract the conditional logic (e.g., width check) into a dedicated hook
- Replace the raw state dependency with the derived boolean subscriber
- Verify component render frequency using React DevTools profiler
- Test that the UI updates correctly only when the threshold state flips
Prerequisites
- –React Hooks
- –Basic knowledge of re-render lifecycles
Pitfalls & limitations
- !Creating too many derived state hooks can increase initial bundle size
- !Missing edge cases in boundary conditions might lead to stuck states
- !Over-optimizing simple components can lead to unnecessary code complexity
FAQ
Why not just use useMemo?
While useMemo stabilizes a value, the component still re-renders if the parent component triggers an update. Subscribing to external state effectively isolates the component from its parent's render lifecycle.
Does this approach work for non-boolean state?
Yes, but it is most effective for booleans or enums that represent discrete states. For complex objects, ensure your subscription includes equality checks to prevent reference-based re-renders.
Will this delay UI updates?
The delay is usually negligible as it happens within the native event loop. It is a trade-off between absolute precision and the performance gain of preventing redundant render cycles.
How it compares
Doing this manually with useEffect often introduces state synchronization bugs; this pattern leverages specialized subscription hooks to handle cleanup and memory management automatically.
📄 Full skill instructions — original source: vercel-labs/agent-skills
## Subscribe to Derived State
Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.
**Incorrect (re-renders on every pixel change):**
**Correct (re-renders only when boolean changes):**
Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.
**Incorrect (re-renders on every pixel change):**
function Sidebar() {
const width = useWindowWidth() // updates continuously
const isMobile = width < 768
return <nav className={isMobile ? 'mobile' : 'desktop'}>
}**Correct (re-renders only when boolean changes):**
function Sidebar() {
const isMobile = useMediaQuery('(max-width: 767px)')
return <nav className={isMobile ? 'mobile' : 'desktop'}>
}How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/rerender-derived-state/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/vercel-labs/agent-skills/rerender-derived-state/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/rerender-derived-state/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/rerender-derived-state/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills
Recommended Rules
View more rules →⚡ Performance Optimization Agent - Speed Expert
Agentic AIPerformanceOptimization
You are an expert performance optimization agent specialized in identifying and fixing performance bottlenecks. Apply systematic reasoning to measure,...
Web Performance Optimization Expert
PerformanceWeb VitalsOptimization
You are an expert in web performance optimization and Core Web Vitals. Key Principles: - Optimize for Core Web Vitals - Minimize Time to First Byte (...
Next.js Performance Optimization
Next.jsPerformanceOptimization
You are an expert in Next.js performance optimization. Key Principles: - Optimize images and fonts - Minimize client-side JavaScript - Use proper cac...
Recommended Workflows
View more workflows →Analyze Bundle Size
PerformanceNext.jsOptimization
--- description: Visualize and reduce your production build size --- 1. **Install Analyzer**: - Install the Next.js bundle analyzer. // turbo ...
Optimize Images for Web
PerformanceImagesOptimization
--- description: Compress and serve images in modern formats for faster loading --- 1. **Use Next.js Image Component**: - Automatic optimization a...
Implement Request Deduplication
PerformanceAPIReact
--- description: Prevent duplicate API calls in React components --- 1. **Next.js 15 Fetch Caching**: - **Change:** `fetch` requests are no longer...
