Subchapter 4.27

React State Fallback

rules/react-state-fallback.mdMarkdown2 KBView on GitHub

Use fallback state instead of initialState

Use undefined as initial state and nullish coalescing (??) to fall back to parent or server values. State represents user intent only—undefined means “user hasn’t chosen yet.” This enables reactive fallbacks that update when the source changes, not just on initial render.

React State Fallback · Vercel React Native Skills · vercel-labs/agent-skills · Skills Docs

type Props = { fallbackEnabled: boolean }

function Toggle({ fallbackEnabled }: Props) {
  const [enabled, setEnabled] = useState(defaultEnabled)
  // If fallbackEnabled changes, state is stale
  // State mixes user intent with default value

  return <Switch value={enabled} onValueChange={setEnabled} />
}

type Props = { fallbackEnabled: boolean }

function Toggle({ fallbackEnabled }: Props) {
  const [_enabled, setEnabled] = useState<boolean | undefined>(undefined)
  const enabled = _enabled ?? defaultEnabled
  // undefined = user hasn't touched it, falls back to prop
  // If defaultEnabled changes, component reflects it
  // Once user interacts, their choice persists

  return <Switch value={enabled} onValueChange={setEnabled} />
}

function ProfileForm({ data }: { data: User }) {
  const [_theme, setTheme] = useState<string | undefined>(undefined)
  const theme = _theme ?? data.theme
  // Shows server value until user overrides
  // Server refetch updates the fallback automatically

  return <ThemePicker value={theme} onChange={setTheme} />
}