J
js-hoist-regexp
Hoist RegExp creation outside render or memoize with useMemo(). Apply when using regular expressions in React components or frequently called functions.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Hoist RegExp creation outside render or memoize with useMemo(). Apply when using regular expressions in React components or frequently called functions.
How to use
- Zidentyfikuj miejsca w komponentach React, gdzie tworzysz nowe wyrażenia regularne wewnątrz funkcji renderującej lub w funkcjach wywoływanych wielokrotnie — każde utworzenie nowego RegExp zużywa pamięć i spowalnia aplikację.
- Jeśli wyrażenie regularne jest statyczne (nie zależy od props lub state), przenieś je na poziom modułu, poza komponent — zdefiniuj je jako stałą na górze pliku, np.
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/. - Jeśli wyrażenie regularne zależy od dynamicznych wartości (np. query z props), opakuj jego tworzenie w hook
useMemo()z odpowiednią tablicą zależności — to zapewni, że RegExp zostanie przebudowany tylko gdy zmienią się jego zależności. - Pamiętaj o ostrzeżeniu dotyczącym globalnych flag (
/g) — mają one mutable'owy stanlastIndex, który może powodować nieoczekiwane wyniki przy wielokrotnym użyciu tego samego obiektu regex'u w pętlach lub kolejnych wywołaniach. - Przetestuj komponent, aby upewnić się, że wyrażenie regularne działa poprawnie i że liczba renderowań zmniejszyła się — możesz użyć React DevTools Profiler do weryfikacji.