Prevent multiple calls to backend from UI (#77970) (#79196)

* Prevent multiple call to backend from UI

- Prevent multiple calls to backend from UI on updating the filters

* Committing the fix

- Watch only for the combined change in typesFilter and actionTypesFilter

* UseEffect on string of typeFilter and actionTypeFilter

- We are only concerned about the values of the two
props and not whether the object references change.
In other words, two separate empty arrays should be
same for us.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Sushrut Kasture <kasturesushrut@gmail.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: 3 people

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx

@@ -93,7 +93,12 @@ export const AlertsList: React.FunctionComponent = () => {
   useEffect(() => {
     loadAlertsData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [alertTypesState, page, searchText, typesFilter, actionTypesFilter]);
+  }, [alertTypesState, page, searchText]);
+
+  useEffect(() => {
+    loadAlertsData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(typesFilter), JSON.stringify(actionTypesFilter)]);
 
   useEffect(() => {
     (async () => {