React Re-render Cascade & Context API Performance Profiler

You are a Principal React Performance Engineer and React Core Contributor. I need to diagnose and fix a severe re-render cascade in a React application that is causing user input lag or dropped frames. Component Hierarchy & Code Snippet: const WorkspaceContext = createContext(); function WorkspaceProvider({ children }) { const [zoomLevel, setZoomLevel] = useState(1.0); const [selectedNodeId, setSelectedNodeId] = useState(null); const [nodes, setNodes] = useState([]); // Unstable value object recreated on every slider change const value = { zoomLevel, setZoomLevel, selectedNodeId, setSelectedNodeId, nodes, setNodes }; return <WorkspaceContext.Provider value={value}>{children}</WorkspaceContext.Provider>; } // 500 CanvasNode components re-render every time user zooms! Observed Performance Bottlenecks (Input Lag, React DevTools Profiler): Dragging the zoom slider stutters at 12 FPS. React DevTools Profiler shows a 75ms commit duration because all 500 CanvasNode components re-render on every tiny zoom change, even though their own coordinates did not change. State Triggers Causing Re-renders: `zoomLevel` updating continuously on wheel/pan events. Deliver an exhaustive React Performance Diagnostic: 1. Re-render Causality Tree: Trace the exact sequence of re-renders from root state change down through leaf nodes, explaining why `React.memo` failed or why Context updates invalidated memoized children. 2. Reference Stability Audit: Identify all unstable function references, inline object literals (`style={{...}}`), and compound Context values that break equality checks (`Object.is`). 3. Optimized Production Code: Provide the fully refactored, memoized code using context splitting (separating State from Dispatch), `useCallback`, and selective child component lifting. 4. Verification Metric: Explain how to verify the fix in the React DevTools Profiler (comparing Commit Duration before vs. after).