Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
Initializing regular expressions within render functions or loops forces the JavaScript engine to recompile the pattern repeatedly, consuming excessive memory and CPU cycles. This skill optimizes runtime performance by shifting regex instantiation out of hot code paths. By moving static patterns to the module-level scope or utilizing memoization hooks like useMemo, applications eliminate redundant object creation and garbage collection pressure. This is critical for high-frequency operations such as text highlighting, search filtering, or real-time form validation, where component re-renders would otherwise trigger thousands of unnecessary re-compilations. Proper scoping ensures that the regex engine interprets the pattern once, preserving state and minimizing execution latency. Implementing this practice is a fundamental step toward building responsive interfaces that remain fluid under load, preventing memory leaks and jitter in user interactions.
When to Use This Skill
- •Search result text highlighting components
- •Real-time form field input validation
- •Custom string parsing during render
- •Dynamic data filtering from list arrays
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “Optimize my component's regex performance
- “Fix repeated regex instantiation in render
- “How to memoize regular expressions in React
- “Stop my regex from recomputing on every render
- “Move regex out of the render loop
What this skill does
- •Identifies regex instantiation within render lifecycles
- •Moves static expressions to the outer module scope
- •Wraps dynamic patterns in memoization hooks
- •Prevents constant recompilation of patterns during component updates
- •Mitigates side effects of stateful global flag usage
When not to use it
- ✕When the regex pattern is truly unique for every execution
- ✕When the pattern size is negligible and called once per session
Example workflow
- Audit the component for new RegExp() calls inside the render function
- Move static regex patterns to the top-level module scope for one-time initialization
- Identify dynamic regex patterns relying on component props or state
- Wrap dynamic RegExp generation in a useMemo hook with appropriate dependencies
- Verify that the regex global flag is handled carefully to prevent stale lastIndex state
Prerequisites
- –React or similar component-based framework
- –Understanding of JavaScript memory management
Pitfalls & limitations
- !Global regex objects retain state via lastIndex which can cause unexpected false results on subsequent tests
- !Incorrect dependency arrays in useMemo can lead to stale regex patterns
- !Escaping user-provided input strings is required to prevent security vulnerabilities
FAQ
How it compares
While manual optimization relies on identifying individual bottlenecks, this skill provides a structural pattern to systematically eliminate recompilation overhead, resulting in more predictable memory usage.
📄 Full skill instructions — original source: vercel-labs/agent-skills
Don't create RegExp inside render. Hoist to module scope or memoize with
useMemo().**Incorrect (new RegExp every render):**
function Highlighter({ text, query }: Props) {
const regex = new RegExp((${query}), 'gi')
const parts = text.split(regex)
return <>{parts.map((part, i) => ...)}</>
}**Correct (memoize or hoist):**
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
function Highlighter({ text, query }: Props) {
const regex = useMemo(
() => new RegExp((${escapeRegex(query)}), 'gi'),
[query]
)
const parts = text.split(regex)
return <>{parts.map((part, i) => ...)}</>
}**Warning (global regex has mutable state):**
Global regex (
/g) has mutable lastIndex state:const regex = /foo/g
regex.test('foo') // true, lastIndex = 3
regex.test('foo') // false, lastIndex = 0How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/js-hoist-regexp/ - 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/js-hoist-regexp/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/js-hoist-regexp/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/js-hoist-regexp/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills
