From 83e9246a301b2f6f41ff7c15f5affdd74d82b245 Mon Sep 17 00:00:00 2001
From: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>
Date: Fri, 20 Mar 2026 15:57:18 -0700
Subject: [PATCH] fix: memoize context values to prevent infinite re-renders

ActiveThemeProvider and BlockViewerProvider were creating new object
references on every render, causing all context consumers to
re-render infinitely. Wrap context values in useMemo to maintain
referential equality across renders.

Fixes #59

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/www/components/active-theme.tsx | 10 ++++---
 apps/www/components/block-viewer.tsx | 39 ++++++++++++++++++----------
 2 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/apps/www/components/active-theme.tsx b/apps/www/components/active-theme.tsx
index 1bc94c61..006513a5 100644
--- a/apps/www/components/active-theme.tsx
+++ b/apps/www/components/active-theme.tsx
@@ -5,6 +5,7 @@ import {
   ReactNode,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from "react"
 
@@ -40,11 +41,12 @@ export function ActiveThemeProvider({
     }
   }, [activeTheme])
 
-  return (
-    <ThemeContext.Provider value={{ activeTheme, setActiveTheme }}>
-      {children}
-    </ThemeContext.Provider>
+  const value = useMemo(
+    () => ({ activeTheme, setActiveTheme }),
+    [activeTheme, setActiveTheme]
   )
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
 }
 
 export function useThemeConfig() {
diff --git a/apps/www/components/block-viewer.tsx b/apps/www/components/block-viewer.tsx
index 0c964530..cc488cde 100644
--- a/apps/www/components/block-viewer.tsx
+++ b/apps/www/components/block-viewer.tsx
@@ -97,21 +97,32 @@ function BlockViewerProvider({
   const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
   const [iframeKey, setIframeKey] = React.useState(0)
 
+  const value = React.useMemo(
+    () => ({
+      item,
+      view,
+      setView,
+      resizablePanelRef,
+      activeFile,
+      setActiveFile,
+      tree,
+      highlightedFiles,
+      iframeKey,
+      setIframeKey,
+    }),
+    [
+      item,
+      view,
+      resizablePanelRef,
+      activeFile,
+      tree,
+      highlightedFiles,
+      iframeKey,
+    ]
+  )
+
   return (
-    <BlockViewerContext.Provider
-      value={{
-        item,
-        view,
-        setView,
-        resizablePanelRef,
-        activeFile,
-        setActiveFile,
-        tree,
-        highlightedFiles,
-        iframeKey,
-        setIframeKey,
-      }}
-    >
+    <BlockViewerContext.Provider value={value}>
       <div
         id={item.name}
         data-view={view}