diff --git a/jam-ui/src/context/GlobalContext.js b/jam-ui/src/context/GlobalContext.js
index 2d01f2e76..0a948a8b9 100644
--- a/jam-ui/src/context/GlobalContext.js
+++ b/jam-ui/src/context/GlobalContext.js
@@ -1,4 +1,4 @@
-import React, { createContext, useState, useCallback, useEffect } from 'react';
+import React, { createContext, useState, useCallback, useEffect, useMemo } from 'react';
 import useMetronomeState from '../hooks/useMetronomeState';
 
 // Create a global context
@@ -77,19 +77,31 @@ export const GlobalProvider = ({ children }) => {
     }));
   }, [handleMetronomeCallback2]);
 
+  // Memoize context value to prevent unnecessary re-renders
+  // useState setters (setTrackVolumeObject, setGlobalObject) are stable and don't need to be dependencies
+  const value = useMemo(() => ({
+    trackVolumeObject,
+    setTrackVolumeObject,
+    globalObject,
+    setGlobalObject,
+    // Metronome state and functions
+    metronomeState,
+    updateMetronomeState,
+    openMetronome,
+    closeMetronome,
+    resetMetronome,
+  }), [
+    trackVolumeObject,
+    globalObject,
+    metronomeState,
+    updateMetronomeState,
+    openMetronome,
+    closeMetronome,
+    resetMetronome
+  ]);
+
   return (
-    <GlobalContext.Provider value={{
-      trackVolumeObject,
-      setTrackVolumeObject,
-      globalObject,
-      setGlobalObject,
-      // Metronome state and functions
-      metronomeState,
-      updateMetronomeState,
-      openMetronome,
-      closeMetronome,
-      resetMetronome,
-    }}>
+    <GlobalContext.Provider value={value}>
       {children}
     </GlobalContext.Provider>
   );
diff --git a/jam-ui/src/context/VuContext.js b/jam-ui/src/context/VuContext.js
index 16743ff6a..92ab3c8b2 100644
--- a/jam-ui/src/context/VuContext.js
+++ b/jam-ui/src/context/VuContext.js
@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import { vuStore } from '../stores/vuStore';
 import useVuHelpers from '../hooks/useVuHelpers.js';
 
@@ -7,11 +7,12 @@ const VuContext = createContext();
 export const VuProvider = ({ children }) => {
   const vuHelpers = useVuHelpers();
 
-  // Combine vuHelpers with vuStore for context value
-  const value = {
+  // Memoize context value to prevent unnecessary re-renders
+  // vuStore is a stable module-level reference, doesn't need to be a dependency
+  const value = useMemo(() => ({
     ...vuHelpers,
     vuStore,
-  };
+  }), [vuHelpers]);
 
   return (
     <VuContext.Provider value={value}>