Hoist RegExp Creation
Don't create RegExp inside render. Hoist to module scope or memoize with useMemo().
Incorrect (new RegExp every render):
tsxfunction Highlighter({ text, query }: Props) { const regex = new RegExp(`(${query})`, 'gi') const parts = text.split(regex) return <>{parts.map((part, i) => ...)}</> }
Correct (memoize or hoist):
tsxconst 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:
typescriptconst regex = /foo/g regex.test('foo') // true, lastIndex = 3 regex.test('foo') // false, lastIndex = 0


