Agent-Skills.md

Agent Skills: js-hoist-regexp

Hoist RegExp creation outside render or memoize with useMemo(). Apply when using regular expressions in React components or frequently called functions.

ID: theorcdev/8bitcn-ui/js-hoist-regexp

Repository

theorcdev/8bitcn-ui
TheOrcDevLicense: MIT
2,036117

Install this agent skill to your local

npx skills add theorcdev/8bitcn-ui --skill js-hoist-regexp

Skill Files

The files that make up js-hoist-regexp.

Download Skill

Loading file tree…

.claude/skills/js-hoist-regexp/SKILL.md

Skill Metadata

Name
js-hoist-regexp
Description
Hoist RegExp creation outside render or memoize with useMemo(). Apply when using regular expressions in React components or frequently called functions.

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

More agent skills