js-hoist-regexp

Skill zapobiegający tworzeniu nowych instancji RegExp przy każdym renderowaniu komponentu React. Pokazuje, jak prawidłowo hoistować wyrażenia regularne do zakresu modułu lub memoizować je za pomocą useMemo(), aby uniknąć zbędnych alokacji pamięci i problemów ze stanem mutable'ego. Zawiera przykłady błędnego kodu, poprawnych rozwiązań oraz ostrzeżenia dotyczące globalnych flag regex'ów, które mogą powodować nieoczekiwane zachowanie ze względu na zmienną właściwość lastIndex.

1. 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ę.
2. 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@]+$/.
3. 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.
4. Pamiętaj o ostrzeżeniu dotyczącym globalnych flag (/g) — mają one mutable'owy stan lastIndex, który może powodować nieoczekiwane wyniki przy wielokrotnym użyciu tego samego obiektu regex'u w pętlach lub kolejnych wywołaniach.
5. 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.