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