Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use Lazy State Initialization
6 
7Pass a function to `useState` for expensive initial values. Without the function form, the initializer runs on every render even though the value is only used once.
8 
9**Incorrect (runs on every render):**
10 
11```tsx
12function FilteredList({ items }: { items: Item[] }) {
13  // buildSearchIndex() runs on EVERY render, even after initialization
14  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
15  const [query, setQuery] = useState('')
16  
17  // When query changes, buildSearchIndex runs again unnecessarily
18  return <SearchResults index={searchIndex} query={query} />
19}
20 
21function UserProfile() {
22  // JSON.parse runs on every render
23  const [settings, setSettings] = useState(
24    JSON.parse(localStorage.getItem('settings') || '{}')
25  )
26  
27  return <SettingsForm settings={settings} onChange={setSettings} />
28}
29```
30 
31**Correct (runs only once):**
32 
33```tsx
34function FilteredList({ items }: { items: Item[] }) {
35  // buildSearchIndex() runs ONLY on initial render
36  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
37  const [query, setQuery] = useState('')
38  
39  return <SearchResults index={searchIndex} query={query} />
40}
41 
42function UserProfile() {
43  // JSON.parse runs only on initial render
44  const [settings, setSettings] = useState(() => {
45    const stored = localStorage.getItem('settings')
46    return stored ? JSON.parse(stored) : {}
47  })
48  
49  return <SettingsForm settings={settings} onChange={setSettings} />
50}
51```
52 
53Use lazy initialization when computing initial values from localStorage/sessionStorage, building data structures (indexes, maps), reading from the DOM, or performing heavy transformations.
54 
55For simple primitives (`useState(0)`), direct references (`useState(props.value)`), or cheap literals (`useState({})`), the function form is unnecessary.
56