diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx
index 08406a588f..262bbc6ee3 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/CreateRow.jsx
@@ -7,7 +7,7 @@ import Select from '@/_ui/Select';
 import { uniqueId } from 'lodash';
 import { useMounted } from '@/_hooks/use-mount';
 
-export const CreateRow = ({ currentState, optionchanged, options, darkMode }) => {
+export const CreateRow = React.memo(({ currentState, optionchanged, options, darkMode }) => {
   const { organizationId, selectedTable, columns, setColumns } = useContext(TooljetDatabaseContext);
   const [columnOptions, setColumnOptions] = useState(options['create_row'] || {});
 
@@ -178,4 +178,4 @@ export const CreateRow = ({ currentState, optionchanged, options, darkMode }) =>
       </div>
     </div>
   );
-};
+});
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx
index 07430d48da..366a694419 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/DeleteRows.jsx
@@ -8,7 +8,7 @@ import Select from '@/_ui/Select';
 import { operators } from '@/TooljetDatabase/constants';
 import { useMounted } from '@/_hooks/use-mount';
 
-export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) => {
+export const DeleteRows = React.memo(({ currentState, optionchanged, options, darkMode }) => {
   const { organizationId, selectedTable, columns, setColumns } = useContext(TooljetDatabaseContext);
   const [deleteRowsOptions, setDeleteRowsOptions] = useState(options['delete_rows'] || {});
 
@@ -83,21 +83,76 @@ export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) =
     }
   }
 
-  const displayColumns = columns.map(({ accessor }) => ({
-    value: accessor,
-    label: accessor,
-  }));
+  const RenderFilterFields = ({ column, operator, value, id }) => {
+    const displayColumns = columns.map(({ accessor }) => ({
+      value: accessor,
+      label: accessor,
+    }));
 
-  const handleColumnChange = (id, selectedOption) => {
-    updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ column: selectedOption } });
-  };
+    const handleColumnChange = (selectedOption) => {
+      updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ column: selectedOption } });
+    };
 
-  const handleOperatorChange = (id, selectedOption) => {
-    updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ operator: selectedOption } });
-  };
+    const handleOperatorChange = (selectedOption) => {
+      updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ operator: selectedOption } });
+    };
 
-  const handleValueChange = (id, newValue) => {
-    updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ value: newValue } });
+    const handleValueChange = (newValue) => {
+      updateFilterOptionsChanged({ ...deleteRowsOptions?.where_filters[id], ...{ value: newValue } });
+    };
+
+    return (
+      <div className="mt-1 row-container">
+        <div className="d-flex fields-container">
+          <div className="field col">
+            <Select
+              useMenuPortal={true}
+              placeholder="Select column"
+              value={column}
+              options={displayColumns}
+              onChange={handleColumnChange}
+            />
+          </div>
+          <div className="field col mx-1">
+            <Select
+              useMenuPortal={true}
+              placeholder="Select operation"
+              value={operator}
+              options={operators}
+              onChange={handleOperatorChange}
+            />
+          </div>
+          <div className="field col-4">
+            <CodeHinter
+              currentState={currentState}
+              initialValue={value ? (typeof value === 'string' ? value : JSON.stringify(value)) : value}
+              className="codehinter-plugins"
+              theme={darkMode ? 'monokai' : 'default'}
+              height={'32px'}
+              placeholder="key"
+              onChange={(newValue) => handleValueChange(newValue)}
+            />
+          </div>
+          <div className="col-1 cursor-pointer m-1 mr-2">
+            <svg
+              onClick={() => removeFilterConditionPair(id)}
+              width="12"
+              height="14"
+              viewBox="0 0 12 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M3.72386 0.884665C3.97391 0.634616 4.31304 0.494141 4.66667 0.494141H7.33333C7.68696 0.494141 8.02609 0.634616 8.27614 0.884665C8.52619 1.13471 8.66667 1.47385 8.66667 1.82747V3.16081H10.6589C10.6636 3.16076 10.6683 3.16076 10.673 3.16081H11.3333C11.7015 3.16081 12 3.45928 12 3.82747C12 4.19566 11.7015 4.49414 11.3333 4.49414H11.2801L10.6664 11.858C10.6585 12.3774 10.4488 12.8738 10.0809 13.2417C9.70581 13.6168 9.1971 13.8275 8.66667 13.8275H3.33333C2.8029 13.8275 2.29419 13.6168 1.91912 13.2417C1.55125 12.8738 1.34148 12.3774 1.33357 11.858L0.719911 4.49414H0.666667C0.298477 4.49414 0 4.19566 0 3.82747C0 3.45928 0.298477 3.16081 0.666667 3.16081H1.32702C1.33174 3.16076 1.33644 3.16076 1.34113 3.16081H3.33333V1.82747C3.33333 1.47385 3.47381 1.13471 3.72386 0.884665ZM2.05787 4.49414L2.66436 11.7721C2.6659 11.7905 2.66667 11.809 2.66667 11.8275C2.66667 12.0043 2.7369 12.1739 2.86193 12.2989C2.98695 12.4239 3.15652 12.4941 3.33333 12.4941H8.66667C8.84348 12.4941 9.01305 12.4239 9.13807 12.2989C9.2631 12.1739 9.33333 12.0043 9.33333 11.8275C9.33333 11.809 9.3341 11.7905 9.33564 11.7721L9.94213 4.49414H2.05787ZM7.33333 3.16081H4.66667V1.82747H7.33333V3.16081ZM4.19526 7.63221C3.93491 7.37186 3.93491 6.94975 4.19526 6.6894C4.45561 6.42905 4.87772 6.42905 5.13807 6.6894L6 7.55133L6.86193 6.6894C7.12228 6.42905 7.54439 6.42905 7.80474 6.6894C8.06509 6.94975 8.06509 7.37186 7.80474 7.63221L6.94281 8.49414L7.80474 9.35607C8.06509 9.61642 8.06509 10.0385 7.80474 10.2989C7.54439 10.5592 7.12228 10.5592 6.86193 10.2989L6 9.43695L5.13807 10.2989C4.87772 10.5592 4.45561 10.5592 4.19526 10.2989C3.93491 10.0385 3.93491 9.61642 4.19526 9.35607L5.05719 8.49414L4.19526 7.63221Z"
+                fill="#E54D2E"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    );
   };
 
   return (
@@ -108,62 +163,7 @@ export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) =
 
       <div className="field-container">
         {Object.values(deleteRowsOptions?.where_filters || {}).map((filter) => (
-          <div className="mt-1 row-container" key={filter.id}>
-            <div className="d-flex fields-container">
-              <div className="field col">
-                <Select
-                  useMenuPortal={true}
-                  placeholder="Select column"
-                  value={filter.column}
-                  options={displayColumns}
-                  onChange={() => handleColumnChange(filter.id)}
-                />
-              </div>
-              <div className="field col mx-1">
-                <Select
-                  useMenuPortal={true}
-                  placeholder="Select operation"
-                  value={filter.operator}
-                  options={operators}
-                  onChange={() => handleOperatorChange(filter.id)}
-                />
-              </div>
-              <div className="field col-4">
-                <CodeHinter
-                  currentState={currentState}
-                  initialValue={
-                    filter.value
-                      ? typeof filter.value === 'string'
-                        ? filter.value
-                        : JSON.stringify(filter.value)
-                      : filter.value
-                  }
-                  className="codehinter-plugins"
-                  theme={darkMode ? 'monokai' : 'default'}
-                  height={'32px'}
-                  placeholder="key"
-                  onChange={(newValue) => handleValueChange(newValue, filter.id)}
-                />
-              </div>
-              <div className="col-1 cursor-pointer m-1 mr-2">
-                <svg
-                  onClick={() => removeFilterConditionPair(filter.id)}
-                  width="12"
-                  height="14"
-                  viewBox="0 0 12 14"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M3.72386 0.884665C3.97391 0.634616 4.31304 0.494141 4.66667 0.494141H7.33333C7.68696 0.494141 8.02609 0.634616 8.27614 0.884665C8.52619 1.13471 8.66667 1.47385 8.66667 1.82747V3.16081H10.6589C10.6636 3.16076 10.6683 3.16076 10.673 3.16081H11.3333C11.7015 3.16081 12 3.45928 12 3.82747C12 4.19566 11.7015 4.49414 11.3333 4.49414H11.2801L10.6664 11.858C10.6585 12.3774 10.4488 12.8738 10.0809 13.2417C9.70581 13.6168 9.1971 13.8275 8.66667 13.8275H3.33333C2.8029 13.8275 2.29419 13.6168 1.91912 13.2417C1.55125 12.8738 1.34148 12.3774 1.33357 11.858L0.719911 4.49414H0.666667C0.298477 4.49414 0 4.19566 0 3.82747C0 3.45928 0.298477 3.16081 0.666667 3.16081H1.32702C1.33174 3.16076 1.33644 3.16076 1.34113 3.16081H3.33333V1.82747C3.33333 1.47385 3.47381 1.13471 3.72386 0.884665ZM2.05787 4.49414L2.66436 11.7721C2.6659 11.7905 2.66667 11.809 2.66667 11.8275C2.66667 12.0043 2.7369 12.1739 2.86193 12.2989C2.98695 12.4239 3.15652 12.4941 3.33333 12.4941H8.66667C8.84348 12.4941 9.01305 12.4239 9.13807 12.2989C9.2631 12.1739 9.33333 12.0043 9.33333 11.8275C9.33333 11.809 9.3341 11.7905 9.33564 11.7721L9.94213 4.49414H2.05787ZM7.33333 3.16081H4.66667V1.82747H7.33333V3.16081ZM4.19526 7.63221C3.93491 7.37186 3.93491 6.94975 4.19526 6.6894C4.45561 6.42905 4.87772 6.42905 5.13807 6.6894L6 7.55133L6.86193 6.6894C7.12228 6.42905 7.54439 6.42905 7.80474 6.6894C8.06509 6.94975 8.06509 7.37186 7.80474 7.63221L6.94281 8.49414L7.80474 9.35607C8.06509 9.61642 8.06509 10.0385 7.80474 10.2989C7.54439 10.5592 7.12228 10.5592 6.86193 10.2989L6 9.43695L5.13807 10.2989C4.87772 10.5592 4.45561 10.5592 4.19526 10.2989C3.93491 10.0385 3.93491 9.61642 4.19526 9.35607L5.05719 8.49414L4.19526 7.63221Z"
-                    fill="#E54D2E"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
+          <RenderFilterFields key={filter.id} {...filter} />
         ))}
 
         <div
@@ -199,4 +199,4 @@ export const DeleteRows = ({ currentState, optionchanged, options, darkMode }) =
       </div>
     </div>
   );
-};
+});
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx
index 1ede59e8a2..02b25a6018 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/ListRows.jsx
@@ -8,7 +8,7 @@ import Select from '@/_ui/Select';
 import { operators } from '@/TooljetDatabase/constants';
 import { useMounted } from '@/_hooks/use-mount';
 
-export const ListRows = ({ currentState, optionchanged, options, darkMode }) => {
+export const ListRows = React.memo(({ currentState, optionchanged, options, darkMode }) => {
   const { organizationId, selectedTable, columns, setColumns } = useContext(TooljetDatabaseContext);
   const [listRowsOptions, setListRowsOptions] = useState(() => options['list_rows'] || {});
 
@@ -115,6 +115,78 @@ export const ListRows = ({ currentState, optionchanged, options, darkMode }) =>
     }
   }
 
+  const RenderFilterFields = ({ column, operator, value, id }) => {
+    const displayColumns = columns.map(({ accessor }) => ({
+      value: accessor,
+      label: accessor,
+    }));
+
+    const handleColumnChange = (selectedOption) => {
+      updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ column: selectedOption } });
+    };
+
+    const handleOperatorChange = (selectedOption) => {
+      updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ operator: selectedOption } });
+    };
+
+    const handleValueChange = (newValue) => {
+      updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ value: newValue } });
+    };
+
+    return (
+      <div className="mt-1 row-container">
+        <div className="d-flex fields-container">
+          <div className="field col">
+            <Select
+              useMenuPortal={true}
+              placeholder="Select column"
+              value={column}
+              options={displayColumns}
+              onChange={handleColumnChange}
+            />
+          </div>
+          <div className="field col mx-1">
+            <Select
+              useMenuPortal={true}
+              placeholder="Select operation"
+              value={operator}
+              options={operators}
+              onChange={handleOperatorChange}
+            />
+          </div>
+          <div className="field col-4">
+            <CodeHinter
+              currentState={currentState}
+              initialValue={value ? (typeof value === 'string' ? value : JSON.stringify(value)) : value}
+              className="codehinter-plugins"
+              theme={darkMode ? 'monokai' : 'default'}
+              height={'32px'}
+              placeholder="key"
+              onChange={(newValue) => handleValueChange(newValue)}
+            />
+          </div>
+          <div className="col-1 cursor-pointer m-1 mr-2">
+            <svg
+              onClick={() => removeFilterConditionPair(id)}
+              width="12"
+              height="14"
+              viewBox="0 0 12 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M3.72386 0.884665C3.97391 0.634616 4.31304 0.494141 4.66667 0.494141H7.33333C7.68696 0.494141 8.02609 0.634616 8.27614 0.884665C8.52619 1.13471 8.66667 1.47385 8.66667 1.82747V3.16081H10.6589C10.6636 3.16076 10.6683 3.16076 10.673 3.16081H11.3333C11.7015 3.16081 12 3.45928 12 3.82747C12 4.19566 11.7015 4.49414 11.3333 4.49414H11.2801L10.6664 11.858C10.6585 12.3774 10.4488 12.8738 10.0809 13.2417C9.70581 13.6168 9.1971 13.8275 8.66667 13.8275H3.33333C2.8029 13.8275 2.29419 13.6168 1.91912 13.2417C1.55125 12.8738 1.34148 12.3774 1.33357 11.858L0.719911 4.49414H0.666667C0.298477 4.49414 0 4.19566 0 3.82747C0 3.45928 0.298477 3.16081 0.666667 3.16081H1.32702C1.33174 3.16076 1.33644 3.16076 1.34113 3.16081H3.33333V1.82747C3.33333 1.47385 3.47381 1.13471 3.72386 0.884665ZM2.05787 4.49414L2.66436 11.7721C2.6659 11.7905 2.66667 11.809 2.66667 11.8275C2.66667 12.0043 2.7369 12.1739 2.86193 12.2989C2.98695 12.4239 3.15652 12.4941 3.33333 12.4941H8.66667C8.84348 12.4941 9.01305 12.4239 9.13807 12.2989C9.2631 12.1739 9.33333 12.0043 9.33333 11.8275C9.33333 11.809 9.3341 11.7905 9.33564 11.7721L9.94213 4.49414H2.05787ZM7.33333 3.16081H4.66667V1.82747H7.33333V3.16081ZM4.19526 7.63221C3.93491 7.37186 3.93491 6.94975 4.19526 6.6894C4.45561 6.42905 4.87772 6.42905 5.13807 6.6894L6 7.55133L6.86193 6.6894C7.12228 6.42905 7.54439 6.42905 7.80474 6.6894C8.06509 6.94975 8.06509 7.37186 7.80474 7.63221L6.94281 8.49414L7.80474 9.35607C8.06509 9.61642 8.06509 10.0385 7.80474 10.2989C7.54439 10.5592 7.12228 10.5592 6.86193 10.2989L6 9.43695L5.13807 10.2989C4.87772 10.5592 4.45561 10.5592 4.19526 10.2989C3.93491 10.0385 3.93491 9.61642 4.19526 9.35607L5.05719 8.49414L4.19526 7.63221Z"
+                fill="#E54D2E"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   const RenderSortFields = ({ column, order, id }) => {
     const orders = [
       { value: 'asc', label: 'Ascending' },
@@ -179,22 +251,6 @@ export const ListRows = ({ currentState, optionchanged, options, darkMode }) =>
   const updateLimitOptions = (limit) => {
     if (listRowsOptions?.limit ?? '' !== limit) setListRowsOptions({ ...listRowsOptions, ...{ limit } });
   };
-  const displayColumns = columns.map(({ accessor }) => ({
-    value: accessor,
-    label: accessor,
-  }));
-
-  const handleColumnChange = (id, selectedOption) => {
-    updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ column: selectedOption } });
-  };
-
-  const handleOperatorChange = (id, selectedOption) => {
-    updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ operator: selectedOption } });
-  };
-
-  const handleValueChange = (id, newValue) => {
-    updateFilterOptionsChanged({ ...listRowsOptions?.where_filters[id], ...{ value: newValue } });
-  };
 
   return (
     <div>
@@ -205,62 +261,7 @@ export const ListRows = ({ currentState, optionchanged, options, darkMode }) =>
           </label>
           <div className="field-container">
             {Object.values(listRowsOptions?.where_filters || {}).map((filter) => (
-              <div className="mt-1 row-container" key={filter.id}>
-                <div className="d-flex fields-container">
-                  <div className="field col">
-                    <Select
-                      useMenuPortal={true}
-                      placeholder="Select column"
-                      value={filter.column}
-                      options={displayColumns}
-                      onChange={() => handleColumnChange(filter.id)}
-                    />
-                  </div>
-                  <div className="field col mx-1">
-                    <Select
-                      useMenuPortal={true}
-                      placeholder="Select operation"
-                      value={filter.operator}
-                      options={operators}
-                      onChange={() => handleOperatorChange(filter.id)}
-                    />
-                  </div>
-                  <div className="field col-4">
-                    <CodeHinter
-                      currentState={currentState}
-                      initialValue={
-                        filter.value
-                          ? typeof filter.value === 'string'
-                            ? filter.value
-                            : JSON.stringify(filter.value)
-                          : filter.value
-                      }
-                      className="codehinter-plugins"
-                      theme={darkMode ? 'monokai' : 'default'}
-                      height={'32px'}
-                      placeholder="key"
-                      onChange={(newValue) => handleValueChange(filter.id, newValue)}
-                    />
-                  </div>
-                  <div className="col-1 cursor-pointer m-1 mr-2">
-                    <svg
-                      onClick={() => removeFilterConditionPair(filter.id)}
-                      width="12"
-                      height="14"
-                      viewBox="0 0 12 14"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M3.72386 0.884665C3.97391 0.634616 4.31304 0.494141 4.66667 0.494141H7.33333C7.68696 0.494141 8.02609 0.634616 8.27614 0.884665C8.52619 1.13471 8.66667 1.47385 8.66667 1.82747V3.16081H10.6589C10.6636 3.16076 10.6683 3.16076 10.673 3.16081H11.3333C11.7015 3.16081 12 3.45928 12 3.82747C12 4.19566 11.7015 4.49414 11.3333 4.49414H11.2801L10.6664 11.858C10.6585 12.3774 10.4488 12.8738 10.0809 13.2417C9.70581 13.6168 9.1971 13.8275 8.66667 13.8275H3.33333C2.8029 13.8275 2.29419 13.6168 1.91912 13.2417C1.55125 12.8738 1.34148 12.3774 1.33357 11.858L0.719911 4.49414H0.666667C0.298477 4.49414 0 4.19566 0 3.82747C0 3.45928 0.298477 3.16081 0.666667 3.16081H1.32702C1.33174 3.16076 1.33644 3.16076 1.34113 3.16081H3.33333V1.82747C3.33333 1.47385 3.47381 1.13471 3.72386 0.884665ZM2.05787 4.49414L2.66436 11.7721C2.6659 11.7905 2.66667 11.809 2.66667 11.8275C2.66667 12.0043 2.7369 12.1739 2.86193 12.2989C2.98695 12.4239 3.15652 12.4941 3.33333 12.4941H8.66667C8.84348 12.4941 9.01305 12.4239 9.13807 12.2989C9.2631 12.1739 9.33333 12.0043 9.33333 11.8275C9.33333 11.809 9.3341 11.7905 9.33564 11.7721L9.94213 4.49414H2.05787ZM7.33333 3.16081H4.66667V1.82747H7.33333V3.16081ZM4.19526 7.63221C3.93491 7.37186 3.93491 6.94975 4.19526 6.6894C4.45561 6.42905 4.87772 6.42905 5.13807 6.6894L6 7.55133L6.86193 6.6894C7.12228 6.42905 7.54439 6.42905 7.80474 6.6894C8.06509 6.94975 8.06509 7.37186 7.80474 7.63221L6.94281 8.49414L7.80474 9.35607C8.06509 9.61642 8.06509 10.0385 7.80474 10.2989C7.54439 10.5592 7.12228 10.5592 6.86193 10.2989L6 9.43695L5.13807 10.2989C4.87772 10.5592 4.45561 10.5592 4.19526 10.2989C3.93491 10.0385 3.93491 9.61642 4.19526 9.35607L5.05719 8.49414L4.19526 7.63221Z"
-                        fill="#E54D2E"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
+              <RenderFilterFields key={filter.id} {...filter} />
             ))}
 
             <div
@@ -326,4 +327,4 @@ export const ListRows = ({ currentState, optionchanged, options, darkMode }) =>
       </div>
     </div>
   );
-};
+});
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/UpdateRows.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/UpdateRows.jsx
index 8b76b837d5..b7af93abc5 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/UpdateRows.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/UpdateRows.jsx
@@ -8,7 +8,7 @@ import { operators } from '@/TooljetDatabase/constants';
 import { uniqueId } from 'lodash';
 import { useMounted } from '@/_hooks/use-mount';
 
-export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) => {
+export const UpdateRows = React.memo(({ currentState, optionchanged, options, darkMode }) => {
   const { organizationId, selectedTable, columns, setColumns } = useContext(TooljetDatabaseContext);
   const [updateRowsOptions, setUpdateRowsOptions] = useState(
     options['update_rows'] || { columns: {}, where_filters: {} }
@@ -111,6 +111,78 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) =
     handleWhereFiltersChange(updatedFiltersObject);
   }
 
+  const RenderFilterFields = ({ column, operator, value, id }) => {
+    const displayColumns = columns.map(({ accessor }) => ({
+      value: accessor,
+      label: accessor,
+    }));
+
+    const handleColumnChange = (selectedOption) => {
+      updateFilterOptionsChanged({ ...updateRowsOptions?.where_filters[id], ...{ column: selectedOption } });
+    };
+
+    const handleOperatorChange = (selectedOption) => {
+      updateFilterOptionsChanged({ ...updateRowsOptions?.where_filters[id], ...{ operator: selectedOption } });
+    };
+
+    const handleValueChange = (newValue) => {
+      updateFilterOptionsChanged({ ...updateRowsOptions?.where_filters[id], ...{ value: newValue } });
+    };
+
+    return (
+      <div className="mt-1 row-container">
+        <div className="d-flex fields-container">
+          <div className="field col">
+            <Select
+              useMenuPortal={true}
+              placeholder="Select column"
+              value={column}
+              options={displayColumns}
+              onChange={handleColumnChange}
+            />
+          </div>
+          <div className="field col mx-1">
+            <Select
+              useMenuPortal={true}
+              placeholder="Select operation"
+              value={operator}
+              options={operators}
+              onChange={handleOperatorChange}
+            />
+          </div>
+          <div className="field col-4">
+            <CodeHinter
+              currentState={currentState}
+              initialValue={value ? (typeof value === 'string' ? value : JSON.stringify(value)) : value}
+              className="codehinter-plugins"
+              theme={darkMode ? 'monokai' : 'default'}
+              height={'32px'}
+              placeholder="key"
+              onChange={(newValue) => handleValueChange(newValue)}
+            />
+          </div>
+          <div className="col-1 cursor-pointer m-1 mr-2">
+            <svg
+              onClick={() => removeFilterConditionPair(id)}
+              width="12"
+              height="14"
+              viewBox="0 0 12 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M3.72386 0.884665C3.97391 0.634616 4.31304 0.494141 4.66667 0.494141H7.33333C7.68696 0.494141 8.02609 0.634616 8.27614 0.884665C8.52619 1.13471 8.66667 1.47385 8.66667 1.82747V3.16081H10.6589C10.6636 3.16076 10.6683 3.16076 10.673 3.16081H11.3333C11.7015 3.16081 12 3.45928 12 3.82747C12 4.19566 11.7015 4.49414 11.3333 4.49414H11.2801L10.6664 11.858C10.6585 12.3774 10.4488 12.8738 10.0809 13.2417C9.70581 13.6168 9.1971 13.8275 8.66667 13.8275H3.33333C2.8029 13.8275 2.29419 13.6168 1.91912 13.2417C1.55125 12.8738 1.34148 12.3774 1.33357 11.858L0.719911 4.49414H0.666667C0.298477 4.49414 0 4.19566 0 3.82747C0 3.45928 0.298477 3.16081 0.666667 3.16081H1.32702C1.33174 3.16076 1.33644 3.16076 1.34113 3.16081H3.33333V1.82747C3.33333 1.47385 3.47381 1.13471 3.72386 0.884665ZM2.05787 4.49414L2.66436 11.7721C2.6659 11.7905 2.66667 11.809 2.66667 11.8275C2.66667 12.0043 2.7369 12.1739 2.86193 12.2989C2.98695 12.4239 3.15652 12.4941 3.33333 12.4941H8.66667C8.84348 12.4941 9.01305 12.4239 9.13807 12.2989C9.2631 12.1739 9.33333 12.0043 9.33333 11.8275C9.33333 11.809 9.3341 11.7905 9.33564 11.7721L9.94213 4.49414H2.05787ZM7.33333 3.16081H4.66667V1.82747H7.33333V3.16081ZM4.19526 7.63221C3.93491 7.37186 3.93491 6.94975 4.19526 6.6894C4.45561 6.42905 4.87772 6.42905 5.13807 6.6894L6 7.55133L6.86193 6.6894C7.12228 6.42905 7.54439 6.42905 7.80474 6.6894C8.06509 6.94975 8.06509 7.37186 7.80474 7.63221L6.94281 8.49414L7.80474 9.35607C8.06509 9.61642 8.06509 10.0385 7.80474 10.2989C7.54439 10.5592 7.12228 10.5592 6.86193 10.2989L6 9.43695L5.13807 10.2989C4.87772 10.5592 4.45561 10.5592 4.19526 10.2989C3.93491 10.0385 3.93491 9.61642 4.19526 9.35607L5.05719 8.49414L4.19526 7.63221Z"
+                fill="#E54D2E"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   const RenderColumnOptions = ({ column, value, id }) => {
     const filteredColumns = columns.filter(({ isPrimaryKey }) => !isPrimaryKey);
     const displayColumns = filteredColumns.map(({ accessor }) => ({
@@ -190,22 +262,6 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) =
       </div>
     );
   };
-  const displayColumns = columns.map(({ accessor }) => ({
-    value: accessor,
-    label: accessor,
-  }));
-
-  const handleColumnChange = (id, selectedOption) => {
-    updateFilterOptionsChanged({ ...updateRowsOptions?.where_filters[id], ...{ column: selectedOption } });
-  };
-
-  const handleOperatorChange = (id, selectedOption) => {
-    updateFilterOptionsChanged({ ...updateRowsOptions?.where_filters[id], ...{ operator: selectedOption } });
-  };
-
-  const handleValueChange = (id, newValue) => {
-    updateFilterOptionsChanged({ ...updateRowsOptions?.where_filters[id], ...{ value: newValue } });
-  };
 
   return (
     <div className="tab-content-wrapper tj-db-field-wrapper">
@@ -215,62 +271,7 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) =
 
       <div className="field-container">
         {Object.values(updateRowsOptions?.where_filters || {}).map((filter) => (
-          <div className="mt-1 row-container" key={filter.id}>
-            <div className="d-flex fields-container">
-              <div className="field col">
-                <Select
-                  useMenuPortal={true}
-                  placeholder="Select column"
-                  value={filter.column}
-                  options={displayColumns}
-                  onChange={() => handleColumnChange(filter.id)}
-                />
-              </div>
-              <div className="field col mx-1">
-                <Select
-                  useMenuPortal={true}
-                  placeholder="Select operation"
-                  value={filter.operator}
-                  options={operators}
-                  onChange={() => handleOperatorChange(filter.id)}
-                />
-              </div>
-              <div className="field col-4">
-                <CodeHinter
-                  currentState={currentState}
-                  initialValue={
-                    filter.value
-                      ? typeof filter.value === 'string'
-                        ? filter.value
-                        : JSON.stringify(filter.value)
-                      : filter.value
-                  }
-                  className="codehinter-plugins"
-                  theme={darkMode ? 'monokai' : 'default'}
-                  height={'32px'}
-                  placeholder="key"
-                  onChange={(newValue) => handleValueChange(filter.id, newValue)}
-                />
-              </div>
-              <div className="col-1 cursor-pointer m-1 mr-2">
-                <svg
-                  onClick={() => removeFilterConditionPair(filter.id)}
-                  width="12"
-                  height="14"
-                  viewBox="0 0 12 14"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M3.72386 0.884665C3.97391 0.634616 4.31304 0.494141 4.66667 0.494141H7.33333C7.68696 0.494141 8.02609 0.634616 8.27614 0.884665C8.52619 1.13471 8.66667 1.47385 8.66667 1.82747V3.16081H10.6589C10.6636 3.16076 10.6683 3.16076 10.673 3.16081H11.3333C11.7015 3.16081 12 3.45928 12 3.82747C12 4.19566 11.7015 4.49414 11.3333 4.49414H11.2801L10.6664 11.858C10.6585 12.3774 10.4488 12.8738 10.0809 13.2417C9.70581 13.6168 9.1971 13.8275 8.66667 13.8275H3.33333C2.8029 13.8275 2.29419 13.6168 1.91912 13.2417C1.55125 12.8738 1.34148 12.3774 1.33357 11.858L0.719911 4.49414H0.666667C0.298477 4.49414 0 4.19566 0 3.82747C0 3.45928 0.298477 3.16081 0.666667 3.16081H1.32702C1.33174 3.16076 1.33644 3.16076 1.34113 3.16081H3.33333V1.82747C3.33333 1.47385 3.47381 1.13471 3.72386 0.884665ZM2.05787 4.49414L2.66436 11.7721C2.6659 11.7905 2.66667 11.809 2.66667 11.8275C2.66667 12.0043 2.7369 12.1739 2.86193 12.2989C2.98695 12.4239 3.15652 12.4941 3.33333 12.4941H8.66667C8.84348 12.4941 9.01305 12.4239 9.13807 12.2989C9.2631 12.1739 9.33333 12.0043 9.33333 11.8275C9.33333 11.809 9.3341 11.7905 9.33564 11.7721L9.94213 4.49414H2.05787ZM7.33333 3.16081H4.66667V1.82747H7.33333V3.16081ZM4.19526 7.63221C3.93491 7.37186 3.93491 6.94975 4.19526 6.6894C4.45561 6.42905 4.87772 6.42905 5.13807 6.6894L6 7.55133L6.86193 6.6894C7.12228 6.42905 7.54439 6.42905 7.80474 6.6894C8.06509 6.94975 8.06509 7.37186 7.80474 7.63221L6.94281 8.49414L7.80474 9.35607C8.06509 9.61642 8.06509 10.0385 7.80474 10.2989C7.54439 10.5592 7.12228 10.5592 6.86193 10.2989L6 9.43695L5.13807 10.2989C4.87772 10.5592 4.45561 10.5592 4.19526 10.2989C3.93491 10.0385 3.93491 9.61642 4.19526 9.35607L5.05719 8.49414L4.19526 7.63221Z"
-                    fill="#E54D2E"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
+          <RenderFilterFields key={filter.id} {...filter} />
         ))}
 
         <div
@@ -313,4 +314,4 @@ export const UpdateRows = ({ currentState, optionchanged, options, darkMode }) =
       </div>
     </div>
   );
-};
+});