feat(ui): Reduce the number of re-fetches on release details (#29507)

static/app/views/releases/detail/index.tsx

@@ -1,6 +1,8 @@
 import {createContext} from 'react';
 import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
+import {Location} from 'history';
+import isEqual from 'lodash/isEqual';
 import pick from 'lodash/pick';
 
 import Alert from 'app/components/alert';
@@ -10,7 +12,7 @@ import NoProjectMessage from 'app/components/noProjectMessage';
 import GlobalSelectionHeader from 'app/components/organizations/globalSelectionHeader';
 import {getParams} from 'app/components/organizations/globalSelectionHeader/getParams';
 import PickProjectToContinue from 'app/components/pickProjectToContinue';
-import {URL_PARAM} from 'app/constants/globalSelectionHeader';
+import {PAGE_URL_PARAM, URL_PARAM} from 'app/constants/globalSelectionHeader';
 import {IconInfo, IconWarning} from 'app/icons';
 import {t} from 'app/locale';
 import {PageContent} from 'app/styles/organization';
@@ -90,6 +92,21 @@ class ReleasesDetail extends AsyncView<Props, State> {
     };
   }
 
+  componentDidUpdate(prevProps, prevContext: Record<string, any>) {
+    const {organization, params, location} = this.props;
+
+    if (
+      prevProps.params.release !== params.release ||
+      prevProps.organization.slug !== organization.slug ||
+      !isEqual(
+        this.pickLocationQuery(prevProps.location),
+        this.pickLocationQuery(location)
+      )
+    ) {
+      super.componentDidUpdate(prevProps, prevContext);
+    }
+  }
+
   getEndpoints(): ReturnType<AsyncComponent['getEndpoints']> {
     const {organization, location, params, releaseMeta} = this.props;
 
@@ -104,7 +121,7 @@ class ReleasesDetail extends AsyncView<Props, State> {
         {
           query: {
             adoptionStages: 1,
-            ...getParams(pick(location.query, [...Object.values(URL_PARAM)])),
+            ...getParams(this.pickLocationQuery(location)),
           },
         },
       ],
@@ -133,6 +150,13 @@ class ReleasesDetail extends AsyncView<Props, State> {
     return endpoints;
   }
 
+  pickLocationQuery(location: Location) {
+    return pick(location.query, [
+      ...Object.values(URL_PARAM),
+      ...Object.values(PAGE_URL_PARAM),
+    ]);
+  }
+
   renderError(...args) {
     const possiblyWrongProject = Object.values(this.state.errors).find(
       e => e?.status === 404 || e?.status === 403
@@ -227,8 +251,15 @@ class ReleasesDetailContainer extends AsyncComponent<
   }
 
   componentDidUpdate(prevProps, prevContext: Record<string, any>) {
-    super.componentDidUpdate(prevProps, prevContext);
+    const {organization, params} = this.props;
+
     this.removeGlobalDateTimeFromUrl();
+    if (
+      prevProps.params.release !== params.release ||
+      prevProps.organization.slug !== organization.slug
+    ) {
+      super.componentDidUpdate(prevProps, prevContext);
+    }
   }
 
   removeGlobalDateTimeFromUrl() {

static/app/views/releases/detail/overview/releaseComparisonChart/index.tsx

@@ -138,7 +138,15 @@ function ReleaseComparisonChart({
       fetchEventsTotals();
       fetchIssuesTotals();
     }
-  }, [period, start, end, organization.slug, location]);
+  }, [
+    period,
+    start,
+    end,
+    organization.slug,
+    location.query.project,
+    location.query.environment?.toString(),
+    release.version,
+  ]);
 
   useEffect(() => {
     const chartInUrl = decodeScalar(location.query.chart) as ReleaseComparisonChartType;