⬅️ Back to Frontend Architecture Index

State Management

1️⃣ Section Purpose

This section documents the global and cross-cutting state mechanisms used in the Smart Supply Pro frontend.

It exists to clarify which concerns are treated as application-wide state (authentication, user preferences, help panel state, toast notifications) and why those concerns are centralized.

The design decisions captured here cover: when to use React Context vs. local component state, how state is composed at the app root, and the boundaries between “global UI state” and “feature/domain state”.

2️⃣ Scope & Boundaries

Included: - React Context providers for cross-cutting concerns: - Authentication - Settings / user preferences - Toast notifications - Help panel state - Provider composition and ownership boundaries (who owns what state) - Architectural rules of thumb for global vs. local state

Excluded: - Server-state caching and API data lifecycle (documented under Data Access) - Page/feature internal state and component state - Form state and validation rules (documented under UI Components)

3️⃣ High-Level Diagram

graph TB App["App"] --> Providers["Global Providers"] Providers --> Auth["AuthContext"] Providers --> Settings["SettingsContext"] Providers --> Toast["ToastContext"] Providers --> Help["HelpContext"] Providers --> Routes["Routing + Shell"] Routes --> Pages["Pages / Features"]

Contents

⬅️ Back to Frontend Architecture Index