From a26f755912ed53759fafd58754d06e2c058d9b80 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Thu, 5 Mar 2026 18:39:02 +0530
Subject: [PATCH] refactor(30-01): wrap JKSessionRemoteTracks with React.memo

- Add memo to React imports (with useMemo)
- Wrap component with memo(function JKSessionRemoteTracks)
- Add displayName for React DevTools
- Prevents unnecessary re-renders when mixerHelper and sessionModel props unchanged
---
 jam-ui/src/components/client/JKSessionRemoteTracks.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/jam-ui/src/components/client/JKSessionRemoteTracks.js b/jam-ui/src/components/client/JKSessionRemoteTracks.js
index a1b39d980..d574a2eb6 100644
--- a/jam-ui/src/components/client/JKSessionRemoteTracks.js
+++ b/jam-ui/src/components/client/JKSessionRemoteTracks.js
@@ -1,11 +1,11 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, memo } from 'react';
 import { useSelector } from 'react-redux';
 import { selectActiveSession } from '../../store/features/activeSessionSlice';
 import { useAuth } from '../../context/UserAuth';
 import JKSessionAudioInputs from './JKSessionAudioInputs';
 import { getAvatarUrl, getInstrumentIcon45_inverted } from '../../helpers/utils';
 
-const JKSessionRemoteTracks = ({ mixerHelper, sessionModel }) => {
+const JKSessionRemoteTracks = memo(function JKSessionRemoteTracks({ mixerHelper, sessionModel }) {
   // Phase 4: Replace CurrentSessionContext with Redux
   const currentSession = useSelector(selectActiveSession);
   const { currentUser } = useAuth();
@@ -74,6 +74,8 @@ const JKSessionRemoteTracks = ({ mixerHelper, sessionModel }) => {
       ))}
     </div>
   );
-};
+});
+
+JKSessionRemoteTracks.displayName = 'JKSessionRemoteTracks';
 
 export default JKSessionRemoteTracks;