Fix react/exhaustive-deps in Modals (#6862)

* Fix react/exhaustive-deps in Modals

* Add release notes for PR #6862

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

packages/desktop-client/src/components/Modals.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useEffect, useEffectEvent } from 'react';
 import { useLocation } from 'react-router';
 
 import { send } from 'loot-core/platform/client/fetch';
@@ -89,12 +89,15 @@ export function Modals() {
   const { modalStack } = useModalState();
   const [budgetId] = useMetadataPref('id');
 
-  useEffect(() => {
+  const onCloseModal = useEffectEvent(() => {
     if (modalStack.length > 0) {
       dispatch(closeModal());
     }
-    // oxlint-disable-next-line react/exhaustive-deps
-  }, [dispatch, location]);
+  });
+
+  useEffect(() => {
+    onCloseModal();
+  }, [location]);
 
   const modals = modalStack
     .map((modal, idx) => {

upcoming-release-notes/6862.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Refactor modal closing behavior to improve code clarity and eliminate eslint disable patterns.