Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use fallback state instead of initialState
6 
7Use `undefined` as initial state and nullish coalescing (`??`) to fall back to
8parent or server values. State represents user intent only—`undefined` means
9"user hasn't chosen yet." This enables reactive fallbacks that update when the
10source changes, not just on initial render.
11 
12**Incorrect (syncs state, loses reactivity):**
13 
14```tsx
15type Props = { fallbackEnabled: boolean }
16 
17function Toggle({ fallbackEnabled }: Props) {
18  const [enabled, setEnabled] = useState(defaultEnabled)
19  // If fallbackEnabled changes, state is stale
20  // State mixes user intent with default value
21 
22  return <Switch value={enabled} onValueChange={setEnabled} />
23}
24```
25 
26**Correct (state is user intent, reactive fallback):**
27 
28```tsx
29type Props = { fallbackEnabled: boolean }
30 
31function Toggle({ fallbackEnabled }: Props) {
32  const [_enabled, setEnabled] = useState<boolean | undefined>(undefined)
33  const enabled = _enabled ?? defaultEnabled
34  // undefined = user hasn't touched it, falls back to prop
35  // If defaultEnabled changes, component reflects it
36  // Once user interacts, their choice persists
37 
38  return <Switch value={enabled} onValueChange={setEnabled} />
39}
40```
41 
42**With server data:**
43 
44```tsx
45function ProfileForm({ data }: { data: User }) {
46  const [_theme, setTheme] = useState<string | undefined>(undefined)
47  const theme = _theme ?? data.theme
48  // Shows server value until user overrides
49  // Server refetch updates the fallback automatically
50 
51  return <ThemePicker value={theme} onChange={setTheme} />
52}
53```
54