rerender-lazy-state
Zoptymalizuj inicjalizację stanu — uruchamiaj obliczenia tylko raz, nie przy każdym renderowaniu
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill nauczy Cię, jak poprawnie używać lazy initialization w React useState. Zamiast wykonywać kosztowne operacje (budowanie indeksów wyszukiwania, parsowanie JSON, złożone obliczenia) przy każdym renderowaniu, przekaż funkcję do useState — wtedy obliczenia uruchomią się tylko raz, podczas pierwszego renderowania. To zmniejsza zbędne przetwarzanie i poprawia wydajność komponentów.
Jak używać
Zidentyfikuj miejsca w kodzie, gdzie inicjalizujesz stan wartościami wymagającymi kosztownych obliczeń — na przykład buildSearchIndex(items), JSON.parse(localStorage.getItem(...)), lub inne transformacje danych.
Zamiast przekazywać wynik bezpośrednio do useState, opakowaj logikę w funkcję strzałkową: useState(() => buildSearchIndex(items)) zamiast useState(buildSearchIndex(items)).
Gdy inicjalizacja wymaga dostępu do localStorage lub sessionStorage, umieść całą logikę wewnątrz funkcji: useState(() => { const stored = localStorage.getItem('key'); return stored ? JSON.parse(stored) : {} }).
Pamiętaj, że funkcja inicjalizacyjna uruchomi się tylko raz — podczas pierwszego renderowania komponentu. Kolejne zmiany stanu lub re-renderowania nie będą ponownie wykonywać tej funkcji.
Nie stosuj lazy initialization dla prostych wartości prymitywnych (useState(0), useState('')), ponieważ ich obliczenie jest już natychmiastowe i nie stanowi problemu wydajności.