js-hoist-regexp
Prevents regex re-instantiation in React components by hoisting to module scope or using useMemo.
Install
mkdir -p .claude/skills/js-hoist-regexp && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4086" && unzip -o skill.zip -d .claude/skills/js-hoist-regexp && rm skill.zipInstalls to .claude/skills/js-hoist-regexp
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Hoist RegExp creation outside render or memoize with useMemo(). Apply when using regular expressions in React components or frequently called functions.Key capabilities
- →Identify RegExp creation inside React render functions
- →Hoist regular expressions to module scope
- →Memoize regular expressions using useMemo
- →Detect mutable state risks in global regular expressions
How it works
It moves RegExp instantiation out of the render cycle to prevent unnecessary object creation and potential state mutation bugs.
Inputs & outputs
When to use js-hoist-regexp
- →Optimizing regex-based text highlighters
- →Refactoring React components to prevent state re-renders
- →Fixing mutable state bugs in global regular expressions
About this skill
Hoist RegExp Creation
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 = 0
When not to use it
- →When the regular expression depends on frequently changing local state
Limitations
- →Global regex flags maintain mutable lastIndex state across calls
How it compares
It prevents performance degradation and state bugs caused by re-creating regex objects on every render.
Compared to similar skills
js-hoist-regexp side by side with the closest alternatives in the catalog.
Try saying
Example prompts that trigger this skill in your AI assistant.
More by TheOrcDev
View all by TheOrcDev →You might also like
web-coder
mochan-tk
Use when: implementing frontend web apps with HTML, CSS, TypeScript, React, accessibility, responsive layout, or performance concerns.
web-coder
Bonzokoles
Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminolo
harden
Aixbox
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.