diff --git a/frontend/src/AppBuilder/_hooks/useSortedComponents.js b/frontend/src/AppBuilder/_hooks/useSortedComponents.js
index 7687a8622d..f89328ead0 100644
--- a/frontend/src/AppBuilder/_hooks/useSortedComponents.js
+++ b/frontend/src/AppBuilder/_hooks/useSortedComponents.js
@@ -22,10 +22,10 @@ const useSortedComponents = (components, currentLayout, id, moduleId) => {
   const sortedComponents = useMemo(() => {
     const { triggerUpdate, shouldReorder } = reorderContainerChildren;
 
-    // If this container is not the target of the reorder, return cached order
-    if (!shouldReorder) {
-      return prevComponentsOrder.current;
-    }
+    // Always recalculate if components array has changed (new component added/removed)
+    const componentsChanged =
+      prevComponentsOrder.current.length !== components.length ||
+      !components.every((comp) => prevComponentsOrder.current.includes(comp));
 
     // If a forced update occurred for this container, recalculate order
     const isForcedUpdate = prevForceUpdateRef.current !== triggerUpdate;
@@ -33,6 +33,14 @@ const useSortedComponents = (components, currentLayout, id, moduleId) => {
       prevForceUpdateRef.current = triggerUpdate;
     }
 
+    // Skip recalculation only if:
+    // 1. This container is not the target of reorder
+    // 2. Components haven't changed
+    // 3. No forced update occurred
+    if (!shouldReorder && !componentsChanged && !isForcedUpdate) {
+      return prevComponentsOrder.current;
+    }
+
     const currentPageComponents = getCurrentPageComponents();
 
     const newComponentsOrder = [...components].sort((a, b) => {