# Requirements: v1.7 Performance Optimization

**Defined:** 2026-03-03
**Core Value:** Eliminate page freezes by reducing unnecessary React re-renders

## v1.7 Requirements

Requirements for optimizing render performance in session screen components.

### VU Meter Optimization

- [x] **VU-01**: VU meter updates use requestAnimationFrame batching instead of immediate state updates ✓
- [x] **VU-02**: VU meter components use refs for direct DOM updates (bypass React reconciliation) ✓
- [x] **VU-03**: VU data stored in external store (useSyncExternalStore pattern) ✓

### Context Optimization

- [x] **CTX-01**: MixersContext value is memoized to prevent unnecessary re-renders ✓
- [x] **CTX-02**: Split MixersContext into separate VuContext and MixerConfigContext ✓
- [x] **CTX-03**: Context consumers only subscribe to data they actually use ✓

### Component Memoization

- [x] **MEMO-01**: JKSessionAudioInputs wrapped with React.memo ✓
- [x] **MEMO-02**: JKSessionRemoteTracks wrapped with React.memo ✓
- [x] **MEMO-03**: SessionTrackVU wrapped with React.memo (if not using refs) ✓
- [x] **MEMO-04**: SessionTrackGain wrapped with React.memo ✓

### Selector Optimization

- [x] **SEL-01**: Consolidate 18+ individual selectors in useMixerHelper into composed selectors ✓
- [x] **SEL-02**: Use createSelector for memoized derived data ✓
- [x] **SEL-03**: Apply shallowEqual comparison for object selectors ✓

### State Update Optimization

- [ ] **STATE-01**: Consolidate triple track sync calls into single debounced call
- [ ] **STATE-02**: Fix debounce instance recreation in useSessionModel.trackChanges
- [ ] **STATE-03**: Prevent array recreation in mixer categorization when content is identical

### State Colocation

- [ ] **COLOC-01**: Move resyncLoading state from JKSessionScreen to ResyncButton component
- [ ] **COLOC-02**: Move videoLoading state from JKSessionScreen to VideoButton component
- [ ] **COLOC-03**: Audit other local states that can be moved to child components

## Decisions

| Decision | Rationale |
|----------|-----------|
| External VU store over Redux | VU updates at 50-70/sec would overwhelm Redux; external store bypasses React reconciliation |
| Context splitting | Separates high-frequency (VU) from low-frequency (config) updates |
| React.memo over PureComponent | Functional components are standard in codebase; memo provides same benefits |
| requestAnimationFrame batching | Limits updates to 60fps max, matches display refresh rate |

## Out of Scope

| Feature | Reason |
|---------|--------|
| Virtualization for track lists | Only beneficial with 10+ participants; complexity not justified for typical sessions |
| Web Workers for VU processing | Overkill; RAF batching should be sufficient |
| Complete state management rewrite | Too risky; incremental optimization preferred |

## Traceability

| Requirement | Phase | Status |
|-------------|-------|--------|
| VU-01 | Phase 28 | Complete |
| VU-02 | Phase 28 | Complete |
| VU-03 | Phase 28 | Complete |
| CTX-01 | Phase 29 | Complete |
| CTX-02 | Phase 29 | Complete |
| CTX-03 | Phase 29 | Complete |
| MEMO-01 | Phase 30 | Complete |
| MEMO-02 | Phase 30 | Complete |
| MEMO-03 | Phase 30 | Complete |
| MEMO-04 | Phase 30 | Complete |
| SEL-01 | Phase 31 | Complete |
| SEL-02 | Phase 31 | Complete |
| SEL-03 | Phase 31 | Complete |
| STATE-01 | Phase 32 | Pending |
| STATE-02 | Phase 32 | Pending |
| STATE-03 | Phase 32 | Pending |
| COLOC-01 | Phase 32 | Pending |
| COLOC-02 | Phase 32 | Pending |
| COLOC-03 | Phase 32 | Pending |

**Coverage:**
- v1.7 requirements: 19 total
- Mapped to phases: 19
- Complete: 13
- Unmapped: 0 ✓

---
*Requirements defined: 2026-03-03*