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}