useCallback

src/components/DataTableTest.jsx

@@ -56,7 +56,8 @@ const TestDataTable = () => {
     const [userId, setUserId] = useState(2);
     const [pageName, setPageName] = useState('loan');
     const [tableName, setTableName] = useState('loan_table');
-    const {settingStore, hideAction, filterAction, sortAction} = useTableSetting();
+    const {settingStore, hideAction, filterAction, sortAction, oldSorting} = useTableSetting();
+    console.log(settingStore)
 
     const columns = useMemo(
         () => [
@@ -142,23 +143,24 @@ const TestDataTable = () => {
         hideAction(userId, pageName, tableName, settingValue);
     };
     const onSortingChange = (event) => {
-        const settingValue = event();
+        const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
         sortAction(userId, pageName, tableName, settingValue);
     }
 
-    return <MaterialReactTable columns={columns}
-                               data={data}
-                               manualSorting={true}
-                               initialState={{
-                                   columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
-                                   sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
-                               }}
-                               state={{
-                                   columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
-                                   sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
-                               }}
-                               onColumnVisibilityChange={onColumnVisibilityChange}
-                               onSortingChange={onSortingChange}
+    return <MaterialReactTable
+        columns={columns}
+        data={data}
+        manualSorting={true}
+        initialState={{
+            columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
+            sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
+        }}
+        state={{
+            columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
+            sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
+        }}
+        onColumnVisibilityChange={onColumnVisibilityChange}
+        onSortingChange={onSortingChange}
     />;
 };
 

src/lib/contexts/tableSetting.jsx

@@ -1,24 +1,22 @@
 'use client'
-
-import {createContext, useEffect, useState} from "react";
-
+import {createContext, useCallback, useEffect, useState} from "react";
 export const TableSettingContext = createContext();
-
 export const TableSettingProvider = ({children}) => {
     const [settingStore, setSettingStore] = useState({});
 
     useEffect(() => {
         const _localStorage = localStorage.getItem("_setting-app")
-        if (_localStorage)
+        if (_localStorage) {
             setSettingStore(JSON.parse(_localStorage))
+        }
     }, []);
 
-    const hideAction = (user_id, page_name, table_name, settingValue) => {
+    const hideAction = useCallback((user_id, page_name, table_name, settingValue) => {
         updateSettingStorage(user_id, page_name, table_name, "hides", settingValue);
-    }
-    const sortAction = (user_id, page_name, table_name, settingValue) => {
+    },[])
+    const sortAction = useCallback((user_id, page_name, table_name, settingValue) => {
         updateSettingStorage(user_id, page_name, table_name, "sorts", settingValue);
-    }
+    },[])
     const filterAction = (user_id, page_name, table_name, settingValue) => {
         updateSettingStorage(user_id, page_name, table_name, "filters", settingValue);
     }