rerender-lazy-state
Use lazy state initialization with useState function form. Apply when computing expensive initial values like building search indexes, parsing JSON, or complex calculations.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Use lazy state initialization with useState function form. Apply when computing expensive initial values like building search indexes, parsing JSON, or complex calculations.
How to use
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.