State Management Patterns

1. Server-to-Client State Flow

sequenceDiagram
    participant Server
    participant Context
    participant Client
    
    Server->>Context: Fetch initial data
    Server->>Context: Pass as props
    Context->>Client: Provide via Context
    Client->>Client: Use state
    Client->>Context: Update state (if mutable)
    Context->>Client: Re-render with new state

Pattern:

1. Server Component fetches data
2. Data passed to Context Provider as props
3. Context Provider initializes state
4. Client Components consume via hooks

2. Form State Flow

sequenceDiagram
    participant Form
    participant RHF
    participant Zod
    participant Action
    
    Form->>RHF: User input
    RHF->>RHF: Update state
    RHF->>Zod: Validate on submit
    Zod->>RHF: Validation result
    RHF->>Action: Submit if valid
    Action->>Form: Success/Error

Pattern:

1. React Hook Form manages form state
2. Zod validates on submit
3. Server Action processes submission
4. Form handles success/error states

3. Table State Flow

sequenceDiagram
    participant Table
    participant Context
    participant Hook
    participant Supabase
    participant URL
    
    Table->>Context: Update filters/sort
    Context->>Hook: Trigger refetch
    Hook->>URL: Update search params
    Hook->>Supabase: Fetch data
    Supabase->>Hook: Return data
    Hook->>Context: Update state
    Context->>Table: Re-render

Pattern:

1. User interacts with table (filter, sort, paginate)
2. Context updates state
3. Hook fetches data from Supabase
4. URL updated for shareability
5. Table re-renders with new data