Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
This skill focuses on restructuring React components to prevent unnecessary execution of costly logic. By shifting heavy calculations or sub-component rendering into separate components wrapped in React.memo, developers can enforce early returns in parent components. When a parent conditional (such as a loading state) triggers, the child component code remains dormant rather than executing its expensive setup logic prematurely. This approach keeps main render functions clean and ensures that data processing only happens when the UI actually requires the rendered result. It serves as a tactical architectural pattern for isolating side effects and computational overhead from primary layout components. While automated tools like the React Compiler may eventually handle these optimizations, manual extraction remains a reliable technique for fine-grained control over component lifecycles in performance-sensitive interfaces.
When to Use This Skill
- •Handling heavy data processing or expensive utility calls before rendering a sub-view
- •Improving performance in layouts where specific conditional branches often return early
- •Decoupling complex UI widgets from their parent's primary state machine
- •Preventing UI freezes by avoiding unnecessary recalculations during loading states
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “Extract this logic into a memoized component
- “Refactor this expensive calculation to a separate child component
- “Optimize this component to skip rendering when loading
- “Move this code into a memoized sub-component
- “Fix excessive re-renders by extracting the sub-component
What this skill does
- •Identifies expensive computation patterns inside parent components
- •Encapsulates sub-logic into isolated, memoized component structures
- •Enables conditional short-circuiting to prevent wasted render cycles
- •Reduces prop drilling by delegating data processing to child scopes
- •Optimizes memory usage by delaying component initialization
When not to use it
- ✕When using the React Compiler, which handles this optimization automatically
- ✕In simple components where the calculation cost is negligible or non-existent
Example workflow
- Identify a component containing expensive logic that should be skipped during loading states
- Create a new component file or block to house the isolated logic
- Wrap the new component definition with React.memo
- Move the heavy calculation from the parent scope into the new component
- Update the parent to conditionally render the new child component only when ready
Prerequisites
- –React
- –Basic understanding of component lifecycles
- –Knowledge of React.memo usage
Pitfalls & limitations
- !Over-memoization can increase bundle size and introduce unnecessary complexity
- !Risk of stale state if dependency arrays in nested hooks are incorrectly configured
- !Maintenance overhead increases as logic is fragmented across multiple files
FAQ
How it compares
Unlike manual useMemo caching which still executes the parent body, this method physically separates code to bypass execution entirely, offering superior performance control.
📄 Full skill instructions — original source: vercel-labs/agent-skills
Extract expensive work into memoized components to enable early returns before computation.
**Incorrect (computes avatar even when loading):**
function Profile({ user, loading }: Props) {
const avatar = useMemo(() => {
const id = computeAvatarId(user)
return <Avatar id={id} />
}, [user])
if (loading) return <Skeleton />
return <div>{avatar}</div>
}**Correct (skips computation when loading):**
const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
const id = useMemo(() => computeAvatarId(user), [user])
return <Avatar id={id} />
})
function Profile({ user, loading }: Props) {
if (loading) return <Skeleton />
return (
<div>
<UserAvatar user={user} />
</div>
)
}**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, manual memoization with
memo() and useMemo() is not necessary. The compiler automatically optimizes re-renders.How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/rerender-memo/ - 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-memo/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/rerender-memo/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/rerender-memo/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills
