From b27ea854f4f769461e6c95fb21cc9b39b00a8679 Mon Sep 17 00:00:00 2001 From: Nuwan Date: Thu, 5 Mar 2026 17:53:34 +0530 Subject: [PATCH] refactor(29-01): wrap context consumers with React.memo Components wrapped: - SessionTrackGain: volume slider - JKSessionMyTrack: local track display - JKSessionVolumeModal: volume popup - JKSessionPanModal: pan control popup - JKSessionBackingTrack: backing track display - JKSessionMetronome: metronome controls Each component: - Wrapped with memo(function ComponentName(...)) - Added displayName for debugging - Preserved PropTypes React.memo prevents re-renders when props haven't changed. Combined with memoized context values, this eliminates unnecessary re-renders across the component tree. Co-Authored-By: Claude Opus 4.5 --- jam-ui/src/components/client/JKSessionBackingTrack.js | 8 +++++--- jam-ui/src/components/client/JKSessionMetronome.js | 8 +++++--- jam-ui/src/components/client/JKSessionMyTrack.js | 8 +++++--- jam-ui/src/components/client/JKSessionPanModal.js | 8 +++++--- jam-ui/src/components/client/JKSessionVolumeModal.js | 8 +++++--- jam-ui/src/components/client/SessionTrackGain.js | 8 +++++--- 6 files changed, 30 insertions(+), 18 deletions(-) diff --git a/jam-ui/src/components/client/JKSessionBackingTrack.js b/jam-ui/src/components/client/JKSessionBackingTrack.js index 452e2b59f..c02d95768 100644 --- a/jam-ui/src/components/client/JKSessionBackingTrack.js +++ b/jam-ui/src/components/client/JKSessionBackingTrack.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, memo } from 'react'; import { useMixersContext } from '../../context/MixersContext'; import { useJamClient } from '../../context/JamClientContext'; import usePanHelpers from '../../hooks/usePanHelpers'; @@ -12,7 +12,7 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons'; import './JKSessionMyTrack.css'; import backingTrackIcon from "../../icons/instruments/icon_instrument_default.svg" -const JKSessionBackingTrack = ({ +const JKSessionBackingTrack = memo(function JKSessionBackingTrack({ backingTrack, mixers, onClose @@ -145,6 +145,8 @@ const JKSessionBackingTrack = ({ )} ); -}; +}); + +JKSessionBackingTrack.displayName = 'JKSessionBackingTrack'; export default JKSessionBackingTrack; \ No newline at end of file diff --git a/jam-ui/src/components/client/JKSessionMetronome.js b/jam-ui/src/components/client/JKSessionMetronome.js index 8d3924834..905d51e44 100644 --- a/jam-ui/src/components/client/JKSessionMetronome.js +++ b/jam-ui/src/components/client/JKSessionMetronome.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { memo } from 'react'; import { useMixersContext } from '../../context/MixersContext'; import { useJamClient } from '../../context/JamClientContext'; import SessionTrackVU from './SessionTrackVU'; @@ -6,7 +6,7 @@ import SessionTrackGain from './SessionTrackGain'; import './JKSessionMyTrack.css'; import computerIcon from '../../assets/img/instruments/icon_instrument_computer45_inverted.svg' -const JKSessionMetronome = ({ +const JKSessionMetronome = memo(function JKSessionMetronome({ mixers, onClose }) => { @@ -112,6 +112,8 @@ const JKSessionMetronome = ({ ); -}; +}); + +JKSessionMetronome.displayName = 'JKSessionMetronome'; export default JKSessionMetronome; diff --git a/jam-ui/src/components/client/JKSessionMyTrack.js b/jam-ui/src/components/client/JKSessionMyTrack.js index c4e3ba627..fe9784e9e 100644 --- a/jam-ui/src/components/client/JKSessionMyTrack.js +++ b/jam-ui/src/components/client/JKSessionMyTrack.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, memo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useMixersContext } from '../../context/MixersContext'; import { useJamClient } from '../../context/JamClientContext'; @@ -20,7 +20,7 @@ import './JKSessionMyTrack.css'; import pluginIcon from '../../assets/img/client/plugin.svg'; import JKInstrumentIcon from '../profile/JKInstrumentIcon'; -const JKSessionMyTrack = ({ +const JKSessionMyTrack = memo(function JKSessionMyTrack({ track, mixers, hasMixer, @@ -341,6 +341,8 @@ const JKSessionMyTrack = ({ )} ); -}; +}); + +JKSessionMyTrack.displayName = 'JKSessionMyTrack'; export default JKSessionMyTrack; diff --git a/jam-ui/src/components/client/JKSessionPanModal.js b/jam-ui/src/components/client/JKSessionPanModal.js index c9b48f1c8..c89d49a7d 100644 --- a/jam-ui/src/components/client/JKSessionPanModal.js +++ b/jam-ui/src/components/client/JKSessionPanModal.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, memo } from 'react'; import { Modal, ModalHeader, @@ -11,7 +11,7 @@ import { import usePanHelpers from '../../hooks/usePanHelpers'; import { useMixersContext } from '../../context/MixersContext'; -const JKSessionPanModal = ({ isOpen, toggle, mixers }) => { +const JKSessionPanModal = memo(function JKSessionPanModal({ isOpen, toggle, mixers }) { const { convertPanToPercent, convertPercentToPan } = usePanHelpers(); const mixerHelper = useMixersContext(); const [panPercent, setPanPercent] = useState(50); // Center position @@ -99,6 +99,8 @@ const JKSessionPanModal = ({ isOpen, toggle, mixers }) => { ); -}; +}); + +JKSessionPanModal.displayName = 'JKSessionPanModal'; export default JKSessionPanModal; diff --git a/jam-ui/src/components/client/JKSessionVolumeModal.js b/jam-ui/src/components/client/JKSessionVolumeModal.js index 546ecd333..74ab58396 100644 --- a/jam-ui/src/components/client/JKSessionVolumeModal.js +++ b/jam-ui/src/components/client/JKSessionVolumeModal.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useCallback } from 'react'; +import React, { useEffect, useState, useCallback, memo } from 'react'; import { Modal, ModalHeader, @@ -10,7 +10,7 @@ import { useMixersContext } from '../../context/MixersContext'; import { useJamClient } from '../../context/JamClientContext'; import { MIX_MODES, ChannelGroupIds, CategoryGroupIds } from '../../helpers/globals.js'; -const JKSessionVolumeModal = ({ isOpen, toggle }) => { +const JKSessionVolumeModal = memo(function JKSessionVolumeModal({ isOpen, toggle }) { const mixerHelper = useMixersContext(); const jamClient = useJamClient(); const mixers = mixerHelper.myTracks[0]?.mixers; @@ -141,6 +141,8 @@ const JKSessionVolumeModal = ({ isOpen, toggle }) => { ); -}; +}); + +JKSessionVolumeModal.displayName = 'JKSessionVolumeModal'; export default JKSessionVolumeModal; diff --git a/jam-ui/src/components/client/SessionTrackGain.js b/jam-ui/src/components/client/SessionTrackGain.js index fca6ebd0e..3ae062ffb 100644 --- a/jam-ui/src/components/client/SessionTrackGain.js +++ b/jam-ui/src/components/client/SessionTrackGain.js @@ -1,10 +1,10 @@ -import React, { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react'; +import React, { useState, useRef, useEffect, useLayoutEffect, useCallback, memo } from 'react'; import PropTypes from 'prop-types'; import './VolumeSlider.css'; // Keep the same CSS for now import { useMixersContext } from '../../context/MixersContext'; import useFaderHelpers from '../../hooks/useFaderHelpers'; -const SessionTrackGain = ({ mixers, gainType, controlGroup, sessionController, orientation = 'vertical' }) => { +const SessionTrackGain = memo(function SessionTrackGain({ mixers, gainType, controlGroup, sessionController, orientation = 'vertical' }) { const mixerHelper = useMixersContext(); const faderHelpers = useFaderHelpers(); @@ -177,7 +177,9 @@ const SessionTrackGain = ({ mixers, gainType, controlGroup, sessionController, o ); -}; +}); + +SessionTrackGain.displayName = 'SessionTrackGain'; SessionTrackGain.propTypes = { mixers: PropTypes.object,