110 lines
3.8 KiB
Markdown
110 lines
3.8 KiB
Markdown
---
|
|
phase: 31-selector-optimization
|
|
plan: 01
|
|
subsystem: performance
|
|
tags: [redux, createSelector, shallowEqual, memoization, react-redux]
|
|
|
|
# Dependency graph
|
|
requires:
|
|
- phase: 30-component-memoization
|
|
provides: React.memo wrapper on container components
|
|
provides:
|
|
- Composed memoized selectors for mixer state (6 selectors)
|
|
- Optimized useMixerHelper hook with shallowEqual comparison
|
|
- Reduced selector subscriptions from 21 to 6
|
|
affects:
|
|
- phase-32 (final verification/testing)
|
|
|
|
# Tech tracking
|
|
tech-stack:
|
|
added: []
|
|
patterns:
|
|
- createSelector for grouping related Redux state
|
|
- shallowEqual for object return comparisons in useSelector
|
|
|
|
key-files:
|
|
created: []
|
|
modified:
|
|
- jam-ui/src/store/features/mixersSlice.js
|
|
- jam-ui/src/hooks/useMixerHelper.js
|
|
|
|
key-decisions:
|
|
- "Group selectors by usage pattern (core, track, lookup, metadata)"
|
|
- "Use shallowEqual comparison with composed selectors for object returns"
|
|
- "Preserve all variable names via destructuring for backward compatibility"
|
|
|
|
patterns-established:
|
|
- "Composed selectors: Use createSelector to group related state that changes together"
|
|
- "shallowEqual + createSelector: Prevents re-renders when grouped object contents unchanged"
|
|
|
|
# Metrics
|
|
duration: 3min
|
|
completed: 2026-03-05
|
|
---
|
|
|
|
# Phase 31 Plan 01: Selector Optimization Summary
|
|
|
|
**Composed memoized selectors using createSelector reduce useMixerHelper subscriptions from 21 to 6 with shallowEqual comparison**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** 3 min
|
|
- **Started:** 2026-03-05T13:38:12Z
|
|
- **Completed:** 2026-03-05T13:41:00Z
|
|
- **Tasks:** 2
|
|
- **Files modified:** 2
|
|
|
|
## Accomplishments
|
|
- Created 6 composed memoized selectors in mixersSlice.js using createSelector
|
|
- Refactored useMixerHelper to use composed selectors with shallowEqual
|
|
- Reduced individual useSelector calls from 21 to 6 (total from 28 to 13)
|
|
- Preserved all existing variable names via destructuring for backward compatibility
|
|
|
|
## Task Commits
|
|
|
|
Each task was committed atomically:
|
|
|
|
1. **Task 1: Create composed selectors in mixersSlice.js** - `0630ebdd3` (feat)
|
|
2. **Task 2: Refactor useMixerHelper to use composed selectors** - `43b99c549` (feat)
|
|
|
|
## Files Modified
|
|
- `jam-ui/src/store/features/mixersSlice.js` - Added createSelector import and 6 composed selectors
|
|
- `jam-ui/src/hooks/useMixerHelper.js` - Replaced 21 individual selectors with 6 composed + shallowEqual
|
|
|
|
## Composed Selectors Added
|
|
|
|
| Selector | Groups | Purpose |
|
|
|----------|--------|---------|
|
|
| selectCoreMixerState | chatMixer, broadcastMixer, recordingMixer | Core mixer objects |
|
|
| selectTrackMixerState | 5 track mixer arrays | Track categorization |
|
|
| selectMixerLookupTables | allMixers, mixersByResourceId, mixersByTrackId | Lookup tables |
|
|
| selectMasterPersonalMixers | masterMixers, personalMixers | Source arrays |
|
|
| selectMixerMetadata | metronome, settings, mediaSummary, noAudioUsers, etc. | Metadata objects |
|
|
| selectSimulatedCategoryMixers | simulatedMusic, simulatedChat | Category controls |
|
|
|
|
## Decisions Made
|
|
- Grouped selectors by usage pattern rather than arbitrary groupings
|
|
- Used shallowEqual with all composed selectors since they return new objects
|
|
- Kept all existing variable names via destructuring to avoid breaking downstream code
|
|
|
|
## Deviations from Plan
|
|
|
|
None - plan executed exactly as written.
|
|
|
|
## Issues Encountered
|
|
- Build verification could not complete due to pre-existing node-sass/M1 Mac compatibility issue
|
|
- Syntax validation and eslint checks confirmed code correctness
|
|
|
|
## User Setup Required
|
|
|
|
None - no external service configuration required.
|
|
|
|
## Next Phase Readiness
|
|
- Selector optimization complete
|
|
- Ready for Phase 32 (final verification/performance testing)
|
|
- Integration testing recommended to verify no regressions
|
|
|
|
---
|
|
*Phase: 31-selector-optimization*
|
|
*Completed: 2026-03-05*
|