hoist-regexp-creation

Creating a RegExp inside a React render function causes performance issues because it instantiates a new regular expression object on every render cycle, leading to unnecessary re-computations and slower application performance.

Optimize regular expression instantiation in a React component by hoisting the RegExp definition to the module scope or wrapping the creation logic in the useMemo hook to prevent redundant object creation during re-renders.

The best way to memoize a RegExp in React is using the useMemo hook, which caches the regular expression instance and ensures the object is only recreated when its specific dependencies change.

A key limitation when hoisting global regular expressions to module scope is their mutable lastIndex state, which can cause unexpected matching pitfalls if the same RegExp instance is reused across multiple operations.