rerender-functional-setstate

Skill Claude'a nauczający prawidłowego użycia funkcyjnych aktualizacji stanu w React. Zamiast odwoływać się bezpośrednio do zmiennej stanu, przekazujesz funkcję, która otrzymuje aktualną wartość. Dzięki temu unikasz problemu stałych zamknięć (stale closures), eliminujesz niepotrzebne zależności w useCallback i tworzysz stabilne referencje callbacków. Szczególnie przydatne przy aktualizowaniu stanu na podstawie jego bieżącej wartości w komponentach funkcyjnych.

1. Zainstaluj skill w swoim projekcie Claude'a, dodając plik do katalogu .claude/skills/ lub importując go w konfiguracji agenta.

2. 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.

3. Skill pokaże Ci, jak zmienić bezpośrednie odwołanie do zmiennej stanu na funkcję. Zamiast setItems([...items, ...newItems]) napiszesz setItems(curr => [...curr, ...newItems]).

4. 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.

5. 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.

6. 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ą.