refactor: optimize updatedOptions with useMemo for performance

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/ResponsiveDataTable.tsx

@@ -307,42 +307,45 @@ const ResponsiveDataTable = ({
       year: 'numeric'
     };
 
-    return new Intl.DateTimeFormat('un-US', dateOptions).format(date);
+    return new Intl.DateTimeFormat('en-US', dateOptions).format(date);
   };
 
-  const updatedOptions = {
-    ...options,
-    print: false,
-    download: false,
-    search: false,
-    filter: false,
-    viewColumns: false,
-    rowsPerPageOptions: rowsPerPageOptions,
-    onViewColumnsChange: (column: string, action: string) => {
-      switch (action) {
-        case 'add': {
-          const colToAdd = columns.find((obj) => obj.name === column);
-          if (colToAdd) {
-            if (colToAdd.options) {
-              colToAdd.options.display = true;
-              updateCols && updateCols([...columns]);
+  const updatedOptions = React.useMemo(
+    () => ({
+      ...options,
+      print: false,
+      download: false,
+      search: false,
+      filter: false,
+      viewColumns: false,
+      rowsPerPageOptions: rowsPerPageOptions,
+      onViewColumnsChange: (column: string, action: string) => {
+        switch (action) {
+          case 'add': {
+            const colToAdd = columns.find((obj) => obj.name === column);
+            if (colToAdd) {
+              if (colToAdd.options) {
+                colToAdd.options.display = true;
+                updateCols && updateCols([...columns]);
+              }
             }
+            break;
           }
-          break;
-        }
-        case 'remove': {
-          const colToRemove = columns.find((obj) => obj.name === column);
-          if (colToRemove) {
-            if (colToRemove.options) {
-              colToRemove.options.display = false;
-              updateCols && updateCols([...columns]);
+          case 'remove': {
+            const colToRemove = columns.find((obj) => obj.name === column);
+            if (colToRemove) {
+              if (colToRemove.options) {
+                colToRemove.options.display = false;
+                updateCols && updateCols([...columns]);
+              }
             }
+            break;
           }
-          break;
         }
       }
-    }
-  };
+    }),
+    [options, rowsPerPageOptions, columns, updateCols]
+  );
 
   const updateColumnsEffect = useCallback(() => {
     columns?.forEach((col) => {
@@ -385,8 +388,7 @@ const ResponsiveDataTable = ({
       }
     });
     updateCols && updateCols([...columns]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columnVisibility, updateCols, data]);
+  }, [columnVisibility, updateCols, columns]);
 
   React.useEffect(() => {
     updateColumnsEffect();