Defer State Reads to Usage Point
Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
Deferring state reads to the point of usage minimizes unnecessary component re-renders. In React frameworks, hooking into global dynamic sources like search parameters or localStorage at the top level forces a component to re-execute whenever that source changes. By moving these reads into event handlers or specific callbacks, the component remains decoupled from the source's update cycle. This approach keeps the component lifecycle clean and predictable. Instead of listening to every change in the URL query string or browser storage, the application fetches the required value only at the exact moment an action occurs. This practice effectively reduces background noise in the render tree and improves overall responsiveness by preventing layout thrashing and redundant computations that provide no benefit to the user experience in static interface sections.
When to Use This Skill
- •Share buttons relying on current URL query parameters
- •Download triggers that read session-based tokens
- •Analytics tracking buttons that grab current search ref codes
- •Copy-to-clipboard actions reading dynamic browser identifiers
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “Optimize component re-renders for URL changes
- “Remove unnecessary searchParams subscriptions in my button
- “Stop my component from re-rendering on every query change
- “Move state reads into event handlers for better performance
- “Refactor to read searchParams only on button click
What this skill does
- •Prevents component re-renders triggered by external state changes
- •Decouples event-driven actions from global state listeners
- •Directly accesses browser APIs for instantaneous data retrieval
- •Reduces the surface area for unnecessary background re-calculation
- •Optimizes memory usage by avoiding unnecessary subscription overhead
When not to use it
- ✕When the component must update immediately as the state changes
- ✕When the state is needed for the component's UI rendering logic
- ✕When using libraries that require reactive state subscriptions
Example workflow
- Identify a component that re-renders due to top-level state hooks
- Remove the reactive state hook from the component body
- Define a new event handler function within the component scope
- Move the state retrieval logic directly into that handler
- Replace the reactive hook reference with a direct API call like URLSearchParams
- Verify that the component no longer triggers renders during state updates
Pitfalls & limitations
- !Direct access to global objects like window can be harder to test
- !Failing to handle null or undefined results that the original hook might have initialized
- !May bypass some type-safety wrappers provided by framework-specific hooks
FAQ
How it compares
This differs from generic optimization because it focuses on state-subscription management rather than DOM memoization or expensive function calculation, specifically targeting the reactive bridge between the URL and the component lifecycle.
📄 Full skill instructions — original source: vercel-labs/agent-skills
Don't subscribe to dynamic state (searchParams, localStorage) if you only read it inside callbacks.
**Incorrect (subscribes to all searchParams changes):**
function ShareButton({ chatId }: { chatId: string }) {
const searchParams = useSearchParams()
const handleShare = () => {
const ref = searchParams.get('ref')
shareChat(chatId, { ref })
}
return <button onClick={handleShare}>Share</button>
}**Correct (reads on demand, no subscription):**
function ShareButton({ chatId }: { chatId: string }) {
const handleShare = () => {
const params = new URLSearchParams(window.location.search)
const ref = params.get('ref')
shareChat(chatId, { ref })
}
return <button onClick={handleShare}>Share</button>
}How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/rerender-defer-reads/ - 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-defer-reads/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/rerender-defer-reads/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/rerender-defer-reads/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills
