Subchapter 3.33

Js Hoist Regexp

rules/js-hoist-regexp.mdMarkdown1 KBView on GitHub

Hoist RegExp Creation

Don’t create RegExp inside render. Hoist to module scope or memoize with useMemo().

Incorrect (new RegExp every render):

Js Hoist Regexp · Vercel React Best Practices · vercel-labs/agent-skills · Skills Docs

function Highlighter({ text, query }: Props) {
  const regex = new RegExp(`(${query})`, 'gi')
  const parts = text.split(regex)
  return <>{parts.map((part, i) => ...)}</>
}

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) => ...)}</>
}