State‐Management - toyo12312/lumina-staff-suite-frontend GitHub Wiki

# State Management Architecture 🧠

To keep the application lightweight and avoid unnecessary re-renders, we avoid dropping everything into a single global store. Instead, we use a decentralized approach.

## 1. Local UI State
For simple component-level state (e.g., toggling a dropdown, form inputs), we use standard React Hooks: `useState` and `useReducer`.

## 2. Server State (Data Fetching)
We separate UI state from Server state. For data fetched from the NestJS backend, we handle caching, loading states, and background synchronization dynamically. 

## 3. Global App State (Context API)
For data that needs to be accessed globally across the application (like User Session, Theme preference, or Current Language), we use React Context combined with Custom Hooks.

// Example: Accessing global user session
const { user, isAuthenticated, logout } = useAuth();

if (!isAuthenticated) return <Navigate to="/login" />;