From 1ea94e4b42c8e9df366d50b4465df18ca3a8c142 Mon Sep 17 00:00:00 2001 From: Tanish Manku Date: Fri, 8 May 2026 20:10:38 -0700 Subject: [PATCH] ui-pagescene: hoist useViewportSize above early return in ControlPanelSceneObject The hook was called below the `if (!currentSceneObject) return null` guard, so renders where `currentSceneObject` was null skipped the hook entirely. When it flipped to non-null on a later render, React saw a new hook appear and threw "rendered more hooks than during the previous render". Move `useViewportSize()` (and the `getScale` helper that consumes it) above the early return so the hook order is stable across renders. --- .../ControlPanelSceneObject.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/frontend/libs/components/pagescene/src/lib/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/frontend/libs/components/pagescene/src/lib/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx index 0458887a27..375abd925e 100644 --- a/frontend/libs/components/pagescene/src/lib/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx +++ b/frontend/libs/components/pagescene/src/lib/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx @@ -212,6 +212,15 @@ export const ControlPanelSceneObject = () => { }; }, [isShowing]); + // Must come before the early return below — hooks have to run in + // the same order every render or React errors with "rendered more + // hooks than during the previous render". + const viewport = useViewportSize(); + const getScale = () => { + const height = viewport.height - 56; + return height < 620 ? height / 620 : 1; + }; + if (!currentSceneObject) { return null; } @@ -276,12 +285,6 @@ export const ControlPanelSceneObject = () => { editorEngine?.deleteObject(currentSceneObject.object_uuid); }; - const viewport = useViewportSize(); - const getScale = () => { - const height = viewport.height - 56; - return height < 620 ? height / 620 : 1; - }; - return (