From 02a82c5371d347a8148cac3be7b221b46593c4e2 Mon Sep 17 00:00:00 2001
From: Pragadesh-45 <54320162+Pragadesh-45@users.noreply.github.com>
Date: Mon, 30 Sep 2024 17:19:18 +0530
Subject: [PATCH] refactor: `ReorderTable` component to use `useMemo` for
 rowsOrder (#3227)

---
 .../bruno-app/src/components/ReorderTable/index.js    | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/bruno-app/src/components/ReorderTable/index.js b/packages/bruno-app/src/components/ReorderTable/index.js
index 9d8c11088..b5ea369a2 100644
--- a/packages/bruno-app/src/components/ReorderTable/index.js
+++ b/packages/bruno-app/src/components/ReorderTable/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import { IconGripVertical, IconMinusVertical } from '@tabler/icons';
 
 /**
@@ -13,17 +13,17 @@ import { IconGripVertical, IconMinusVertical } from '@tabler/icons';
 
 const ReorderTable = ({ children, updateReorderedItem }) => {
   const tbodyRef = useRef();
-  const [rowsOrder, setRowsOrder] = useState(React.Children.toArray(children));
   const [hoveredRow, setHoveredRow] = useState(null);
   const [dragStart, setDragStart] = useState(null);
 
+  const rowsOrder = useMemo(() => React.Children.toArray(children), [children]);
+
   /**
-   * useEffect hook to update the rows order and handle row hover states
+   * useEffect hook to handle row hover states
    */
   useEffect(() => {
-    setRowsOrder(React.Children.toArray(children));
     handleRowHover(null, false);
-  }, [children, dragStart]);
+  }, [children]);
 
   const handleRowHover = (index, hoverstatus = true) => {
     setHoveredRow(hoverstatus ? index : null);
@@ -48,7 +48,6 @@ const ReorderTable = ({ children, updateReorderedItem }) => {
       const updatedRowsOrder = [...rowsOrder];
       const [movedRow] = updatedRowsOrder.splice(fromIndex, 1);
       updatedRowsOrder.splice(toIndex, 0, movedRow);
-      setRowsOrder(updatedRowsOrder);
 
       updateReorderedItem({
         updateReorderedItem: updatedRowsOrder.map((row) => row.props['data-uid'])