3.6 KiB
3.6 KiB
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
- VU-01: VU meter updates use requestAnimationFrame batching instead of immediate state updates ✓
- VU-02: VU meter components use refs for direct DOM updates (bypass React reconciliation) ✓
- VU-03: VU data stored in external store (useSyncExternalStore pattern) ✓
Context Optimization
- CTX-01: MixersContext value is memoized to prevent unnecessary re-renders ✓
- CTX-02: Split MixersContext into separate VuContext and MixerConfigContext ✓
- CTX-03: Context consumers only subscribe to data they actually use ✓
Component Memoization
- MEMO-01: JKSessionAudioInputs wrapped with React.memo ✓
- MEMO-02: JKSessionRemoteTracks wrapped with React.memo ✓
- MEMO-03: SessionTrackVU wrapped with React.memo (if not using refs) ✓
- MEMO-04: SessionTrackGain wrapped with React.memo ✓
Selector Optimization
- SEL-01: Consolidate 18+ individual selectors in useMixerHelper into composed selectors ✓
- SEL-02: Use createSelector for memoized derived data ✓
- 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