refactor(29-01): memoize VuContext and GlobalContext provider values

VuContext:
- Wrap combined value object with useMemo
- vuStore is stable module reference (not a dependency)
- Depends on vuHelpers

GlobalContext:
- Wrap provider value with useMemo
- Dependencies: all state and callback values
- useState setters are stable (not dependencies)

Both contexts now only update consumers when actual data changes,
preventing unnecessary re-renders across the component tree.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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={{
+    <GlobalContext.Provider value={value}>
-      trackVolumeObject,
-      setTrackVolumeObject,
-      globalObject,
-      setGlobalObject,
-      // Metronome state and functions
-      metronomeState,
-      updateMetronomeState,
-      openMetronome,
-      closeMetronome,
-      resetMetronome,
-    }}>
       {children}
     </GlobalContext.Provider>
   );

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
+  // Memoize context value to prevent unnecessary re-renders
-  const value = {
+  // 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}>