rerender-functional-setstate
Use functional setState updates to prevent stale closures and unnecessary callback recreations. Apply when updating state based on the current state value in React components.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Use functional setState updates to prevent stale closures and unnecessary callback recreations. Apply when updating state based on the current state value in React components.
How to use
Zainstaluj skill w swoim projekcie Claude'a, dodając plik do katalogu
.claude/skills/lub importując go w konfiguracji agenta.Kiedy piszesz komponent React ze stanem, który aktualizujesz na podstawie jego bieżącej wartości, poproś Claude'a o zastosowanie tego skilla. Wskaż miejsca, gdzie używasz
setItems([...items, ...newItems])lub podobnych wzorców.Skill pokaże Ci, jak zmienić bezpośrednie odwołanie do zmiennej stanu na funkcję. Zamiast
setItems([...items, ...newItems])napiszeszsetItems(curr => [...curr, ...newItems]).Usuń zmienną stanu z tablicy zależności useCallback. Ponieważ funkcja aktualizująca zawsze otrzymuje aktualną wartość, nie musisz już dodawać stanu jako zależności.
Zweryfikuj, że callbacki są teraz stabilne — nie powinny być tworzone na nowo przy każdej zmianie stanu. To zmniejszy niepotrzebne re-rendery komponentów potomnych.
Sprawdź, czy problem stałych zamknięć zniknął. Jeśli zapomniałeś wcześniej dodać stan do zależności, teraz callback będzie zawsze pracować z aktualną wartością.