Fix react-hooks/exhaustive-deps error on useSelected.tsx (#4258)

* Fix react-hooks/exhaustive-deps error on useSelected.tsx * Release notes
actualbudget · Feb 19, 2025 · 81db739 · 81db739
1 parent 7c9a499
commit 81db739
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -802,8 +802,6 @@ export default [
       'packages/desktop-client/src/hooks/useCategories.ts',
       'packages/desktop-client/src/hooks/usePayees.ts',
       'packages/desktop-client/src/hooks/useProperFocus.tsx',
-      'packages/desktop-client/src/hooks/useSelected.tsx',
-      'packages/loot-core/src/client/query-hooks.tsx',
     ],
 
     rules: {

diff --git a/packages/desktop-client/src/hooks/useSelected.tsx b/packages/desktop-client/src/hooks/useSelected.tsx
@@ -204,7 +204,7 @@ export function useSelected<T extends Item>(
     const prevState = undo.getUndoState('selectedItems');
     undo.setUndoState('selectedItems', { name, items: state.selectedItems });
     return () => undo.setUndoState('selectedItems', prevState);
-  }, [state.selectedItems]);
+  }, [name, state.selectedItems]);
 
   useEffect(() => {
     function onUndo({ messages, undoTag }: UndoState) {
@@ -233,7 +233,7 @@ export function useSelected<T extends Item>(
     }
 
     return listen('undo-event', onUndo);
-  }, []);
+  }, [name]);
 
   return {
     items: state.selectedItems,
@@ -263,37 +263,35 @@ export function SelectedProvider<T extends Item>({
   fetchAllIds,
   children,
 }: SelectedProviderProps<T>) {
-  const latestItems = useRef(null);
-
-  useEffect(() => {
-    latestItems.current = instance.items;
-  }, [instance.items]);
+  const { items: instanceItems, dispatch: instanceDispatch } = instance;
+  const latestItems = useRef(instanceItems);
+  latestItems.current = instanceItems;
 
   const dispatch = useCallback(
     async (action: Actions) => {
       if (action.type === 'select-all') {
         if (latestItems.current && latestItems.current.size > 0) {
-          return instance.dispatch({
+          return instanceDispatch({
             type: 'select-none',
             isRangeSelect: action.isRangeSelect,
           });
         } else {
           if (fetchAllIds) {
-            return instance.dispatch({
+            return instanceDispatch({
               type: 'select-all',
               ids: await fetchAllIds(),
               isRangeSelect: action.isRangeSelect,
             });
           }
-          return instance.dispatch({
+          return instanceDispatch({
             type: 'select-all',
             isRangeSelect: action.isRangeSelect,
           });
         }
       }
-      return instance.dispatch(action);
+      return instanceDispatch(action);
     },
-    [instance.dispatch, fetchAllIds],
+    [instanceDispatch, fetchAllIds],
   );
 
   return (
@@ -335,7 +333,7 @@ export function SelectedProviderWithItems<T extends Item>({
 
   useEffect(() => {
     registerDispatch?.(selected.dispatch);
-  }, [registerDispatch]);
+  }, [registerDispatch, selected.dispatch]);
 
   return (
     <SelectedProvider<T> instance={selected} fetchAllIds={fetchAllIds}>

diff --git a/upcoming-release-notes/4258.md b/upcoming-release-notes/4258.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Fix react-hooks/exhaustive-deps error on useSelected.tsx