Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
Narrow Effect Dependencies is a React optimization technique focused on refining the trigger conditions for useEffect hooks. By default, developers often pass whole objects or arrays into dependency lists, causing side effects to execute whenever any internal property of that object updates. This skill enforces the practice of passing specific primitive values instead of complex structures, preventing unnecessary re-execution of logic. It also encourages pulling derived state calculations out of the effect body and into the component scope. By isolating exact dependencies, you minimize computational overhead, avoid stale closures, and prevent infinite loops in your component tree. This approach leads to more predictable rendering cycles and helps maintain clean, performant React applications by ensuring effects only react to meaningful data changes.
When to Use This Skill
- •Optimizing effects triggered by large user profile objects
- •Handling mobile/desktop viewport breakpoints efficiently
- •Preventing excessive API calls when only one field in a settings object changes
- •Syncing complex local state with external storage or DOM events
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “optimize my useEffect dependency list
- “why does my effect run too many times
- “reduce re-renders in my react component
- “narrow down my react effect triggers
- “convert object dependency to primitive dependency
What this skill does
- •Reduces re-render overhead by isolating specific data points
- •Converts complex object dependencies into primitive dependencies
- •Extracts logic into derived variables to prevent effect churn
- •Identifies unnecessary effect cycles caused by broad array dependencies
- •Optimizes state management by narrowing effect trigger scope
When not to use it
- ✕When an object is deeply nested and requires monitoring of multiple unpredictable keys
- ✕If the code readability significantly degrades by destructuring a massive state object
Example workflow
- Identify a useEffect hook that triggers more frequently than expected.
- Inspect the current dependency array for object or array references.
- Extract the necessary primitive fields from the object.
- Move conditional logic into a constant to create a boolean derived state.
- Update the dependency array to include only the new derived boolean.
- Verify the effect execution count via console logs or React DevTools.
Prerequisites
- –Understanding of the React useEffect hook lifecycle
- –Basic knowledge of referential equality in JavaScript
Pitfalls & limitations
- !Accidentally creating new object references in the component body that trigger the effect anyway
- !Missing essential dependencies when overly aggressive in narrowing
- !Complexity creep when extracting too many derived values
FAQ
How it compares
While manual optimization requires manually auditing every dependency, this skill provides a structural pattern that programmatically enforces tighter execution cycles.
📄 Full skill instructions — original source: vercel-labs/agent-skills
Specify primitive dependencies instead of objects to minimize effect re-runs.
**Incorrect (re-runs on any user field change):**
useEffect(() => {
console.log(user.id)
}, [user])**Correct (re-runs only when id changes):**
useEffect(() => {
console.log(user.id)
}, [user.id])**For derived state, compute outside effect:**
// Incorrect: runs on width=767, 766, 765...
useEffect(() => {
if (width < 768) {
enableMobileMode()
}
}, [width])
// Correct: runs only on boolean transition
const isMobile = width < 768
useEffect(() => {
if (isMobile) {
enableMobileMode()
}
}, [isMobile])How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/rerender-dependencies/ - 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-dependencies/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/rerender-dependencies/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/rerender-dependencies/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills
