jam-cloud/.planning/phases/32-state-update-optimization/32-04-PLAN.md

---
phase: 32-state-update-optimization
plan: 04
type: execute
wave: 2
depends_on: ["32-03"]
files_modified:
  - jam-ui/src/components/client/JKSessionScreen.js
autonomous: false

must_haves:
  truths:
    - "Local state audit completed with documented findings"
    - "Any additional colocation candidates identified and addressed"
    - "JKSessionScreen re-render count measurably reduced"
  artifacts:
    - path: ".planning/phases/32-state-update-optimization/32-04-SUMMARY.md"
      provides: "Audit results and re-render measurements"
      contains: "State Colocation Audit"
---

<objective>
Audit JKSessionScreen local state and verify re-render reduction

Purpose: Complete COLOC-03 requirement by auditing remaining useState declarations in JKSessionScreen, identifying any additional colocation candidates, and measuring the re-render improvement from Phase 32 changes.

Output: Audit documentation, any additional colocations if applicable, before/after re-render measurements
</objective>

<execution_context>
@/Users/nuwan/.claude/get-shit-done/workflows/execute-plan.md
@/Users/nuwan/.claude/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/phases/32-state-update-optimization/32-RESEARCH.md

# Prior plan summary needed for context
@.planning/phases/32-state-update-optimization/32-03-SUMMARY.md

# Source file to audit
@jam-ui/src/components/client/JKSessionScreen.js
</context>

<tasks>

<task type="auto">
  <name>Task 1: Audit remaining useState declarations</name>
  <files>jam-ui/src/components/client/JKSessionScreen.js</files>
  <action>
Analyze all remaining useState declarations in JKSessionScreen after Plan 03 changes.

1. List all useState declarations:
```bash
grep -n "useState" jam-ui/src/components/client/JKSessionScreen.js
```

2. For each state variable, document:
   - Name and purpose
   - Where it's used (components that read it)
   - Whether it could be colocated to a child component
   - Decision: KEEP (used by multiple children or parent logic) or CANDIDATE (single child usage)

Expected states after Plan 03 (with videoLoading/resyncLoading removed):
- volumeLevel - Used in volume modal, could be colocated to JKSessionVolumeModal
- leaveRating - Used in leave modal flow
- leaveComments - Used in leave modal flow
- leaveLoading - Used in leave modal button

3. Analyze each candidate:
   - volumeLevel: Shared between slider and display, modal handles both - KEEP (modal manages its own state)
   - leaveRating/leaveComments/leaveLoading: All used within leave modal flow
     - These could potentially move to JKSessionLeaveModal
     - But leave modal may need values from parent for submit
     - Decision: Document as FUTURE CANDIDATE - not critical path for this phase

4. Record findings in task output for summary.
  </action>
  <verify>
Review useState declarations present:
`grep -c "useState" jam-ui/src/components/client/JKSessionScreen.js`

Verify videoLoading/resyncLoading removed (should be 0):
`grep -c "videoLoading\|resyncLoading" jam-ui/src/components/client/JKSessionScreen.js`
  </verify>
  <done>
useState audit completed with documented decisions for each state variable
  </done>
</task>

<task type="auto">
  <name>Task 2: Document re-render measurement approach</name>
  <files>jam-ui/src/components/client/JKSessionScreen.js</files>
  <action>
Add a temporary render counter for measurement purposes. This will be removed after verification.

1. Add render counter at the beginning of the JKSessionScreen function body:
```javascript
// TEMPORARY: Render counter for Phase 32 verification
// Remove after verifying optimization
const renderCountRef = React.useRef(0);
renderCountRef.current += 1;
if (process.env.NODE_ENV === 'development') {
  console.log(`[JKSessionScreen] Render #${renderCountRef.current}`);
}
```

2. Document in the summary how to measure:
   - Open React DevTools Profiler
   - Start recording
   - Join a session (triggers track sync and mixer setup)
   - Wait 10 seconds for stabilization
   - Stop recording
   - Check JKSessionScreen render count
   - Compare with expected reduction (baseline was ~20-30 renders on join, target is 50%+ reduction)

3. The success criteria from roadmap: "JKSessionScreen re-render count reduced by 50%+"
   - This measurement is a checkpoint for the user to verify
   - Document expected numbers in summary
  </action>
  <verify>
Render counter present (for now):
`grep "renderCountRef" jam-ui/src/components/client/JKSessionScreen.js | head -3`

Counter only logs in development:
`grep "NODE_ENV.*development" jam-ui/src/components/client/JKSessionScreen.js`
  </verify>
  <done>
Render counter added for measurement, documentation of measurement approach prepared
  </done>
</task>

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>
Phase 32 state update optimizations:
1. Single debounced track sync (replacing 3 setTimeout calls)
2. Stable useDebounceCallback hook for trackChanges
3. Conditional dispatch in mixer categorization
4. JKResyncButton with colocated loading state
5. JKVideoButton with colocated loading state
6. State colocation audit completed
  </what-built>
  <how-to-verify>
1. **Functional verification:**
   - Start jam-ui: `cd jam-ui && npm run start`
   - Log in and join a session
   - Verify session loads correctly
   - Click Resync button - should show loading spinner
   - Click Video button - should open video conferencing

2. **Re-render measurement:**
   - Open React DevTools in browser (F12 -> Profiler tab)
   - Click "Start profiling"
   - Join a new session (or refresh current session)
   - Wait 10 seconds
   - Click "Stop profiling"
   - Look at JKSessionScreen render count
   - Expected: Significantly fewer renders than before (target: 50%+ reduction)
   - Check console for `[JKSessionScreen] Render #X` logs

3. **Track sync verification:**
   - Open Network tab in DevTools
   - Join a session
   - Filter by "track" in network requests
   - Should see only ONE track sync call (not 3)

4. **Console verification:**
   - After joining session, check console for:
     - `[Track Sync] Mixers ready, scheduling single debounced sync` (if uncommented)
     - `[useMixerHelper] Metronome mixers changed, dispatching` (on first categorization)
     - Subsequent mixer updates should NOT log dispatch messages

5. **Remove render counter:**
   - After verification, the render counter can be removed from JKSessionScreen
   - Or keep for ongoing monitoring (your preference)
  </how-to-verify>
  <resume-signal>
Type "approved" if:
- Session joins and works correctly
- Buttons function as expected
- Re-render count is measurably reduced
- Track sync fires once (not 3 times)

Or describe any issues found.
  </resume-signal>
</task>

</tasks>

<verification>
1. Audit completed (Task 1):
   - All useState documented with decisions
   - No missed colocation opportunities for this phase

2. Measurement approach documented (Task 2):
   - Render counter added
   - Steps for measuring improvement clear

3. Human verification (Task 3):
   - Functional tests pass
   - Performance improvement confirmed
</verification>

<success_criteria>
- [ ] All useState declarations audited and documented
- [ ] Render counter added for measurement
- [ ] User verifies session join works
- [ ] User verifies buttons work
- [ ] User confirms re-render reduction (50%+ target)
- [ ] Track sync fires once per session join
</success_criteria>

<output>
After completion, create `.planning/phases/32-state-update-optimization/32-04-SUMMARY.md`

Include in summary:
- State audit results table
- Re-render measurements (before/after if available)
- Any additional candidates for future optimization
</output>