Optimization & Refactoring

[ptnghia-j]

• Decouple useEffect logic and optimize beat animation loop

  • Add React.memo to CollapsibleVideoPlayer, MetronomeControls, AnalysisSummary
  • Split massive useEffect into focused effects
  • Optimize beat animation loop (lines 471-533)

• migrate to ContextUI to avoid re-rendering

• Parallelizing API requests

  • Parallelize Firebase and backend processing
  • Implement request deduplication

• Audio optimization

  • Keep FFmpeg.wasm loaded persistently
  • Implement useReducer for state consolidation

• Frontend improvements and migration

  • Migrate to Zustand for Global State Management
  • Implement Request Cancellation for Video Switches
  • Parallelize Beat and Chord Detection
  • Optimize Beat Animation Loop

• Race Conditions with Request Cancellation and Stale Response Guards

• Reduce Bundle Fragmentation

• Lazy Load Heavy Dependencies (Tone.js and smplr)

• ChordGrid Re-rendering Issues