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,