From 895c8304dc31604a814cc8b496c508668496fa2e Mon Sep 17 00:00:00 2001
From: wlenig <30681316+wlenig@users.noreply.github.com>
Date: Thu, 19 Mar 2026 21:00:21 -0400
Subject: [PATCH] WEB-101 Use selectors with `createUsePuck` to avoid
 unnecessary rerenders

---
 src/app/editor/[id]/ActionBarOverride.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/editor/[id]/ActionBarOverride.tsx b/src/app/editor/[id]/ActionBarOverride.tsx
index 145a6b21..15a33129 100644
--- a/src/app/editor/[id]/ActionBarOverride.tsx
+++ b/src/app/editor/[id]/ActionBarOverride.tsx
@@ -1,10 +1,12 @@
 "use client";
 
 import { useCallback, useRef } from "react";
-import { ActionBar, usePuck } from "@puckeditor/core";
+import { ActionBar, createUsePuck } from "@puckeditor/core";
 import type { ComponentData, Config } from "@puckeditor/core";
 import { Copy, CopyPlus, ClipboardPaste } from "lucide-react";
 
+const usePuck = createUsePuck();
+
 const CLIPBOARD_MARKER = "_puckClipboard";
 
 type ClipboardPayload = {
@@ -92,7 +94,10 @@ export function ActionBarOverride({
   label?: string;
   parentAction: React.ReactNode;
 }) {
-  const { selectedItem, config, dispatch, getSelectorForId } = usePuck();
+  const selectedItem = usePuck((s) => s.selectedItem);
+  const config = usePuck((s) => s.config);
+  const dispatch = usePuck((s) => s.dispatch);
+  const getSelectorForId = usePuck((s) => s.getSelectorForId);
   const isPastingRef = useRef(false);
 
   const handleDuplicate = useCallback(() => {