ref(replay): Consistently call useMemo when reading lists from `location.query` (#54960)

`decodeList` can return a new empty-array in a lot of cases. So we'll
wrap the output with `useMemo` so that, when that specific filter field
isn't being used, we can try to skip filtering the items and thus
re-rendering.

This is more useful when 'other' query params are changing on the replay
details page. Whenever any filter-related param changes, well then we
need to re-filter and re-render the data.

static/app/views/replays/detail/console/useConsoleFilters.tsx

@@ -76,7 +76,7 @@ function useConsoleFilters({frames}: Options): Return {
   // re-render when items are expanded/collapsed, though it may work in state as well.
   const expandPathsRef = useRef(new Map<number, Set<string>>());
 
-  const logLevel = decodeList(query.f_c_logLevel);
+  const logLevel = useMemo(() => decodeList(query.f_c_logLevel), [query.f_c_logLevel]);
   const searchTerm = decodeScalar(query.f_c_search, '').toLowerCase();
 
   const items = useMemo(

static/app/views/replays/detail/domMutations/useDomFilters.tsx

@@ -48,10 +48,7 @@ function useDomFilters({actions}: Options): Return {
   const {setFilter, query} = useFiltersInLocationQuery<FilterFields>();
 
   const type = useMemo(() => decodeList(query.f_d_type), [query.f_d_type]);
-  const searchTerm = useMemo(
-    () => decodeScalar(query.f_d_search, '').toLowerCase(),
-    [query.f_d_search]
-  );
+  const searchTerm = decodeScalar(query.f_d_search, '').toLowerCase();
 
   const items = useMemo(
     () =>

static/app/views/replays/detail/errorList/useErrorFilters.tsx

@@ -43,7 +43,7 @@ const FILTERS = {
 function useErrorFilters({errorFrames}: Options): Return {
   const {setFilter, query} = useFiltersInLocationQuery<FilterFields>();
 
-  const project = decodeList(query.f_e_project);
+  const project = useMemo(() => decodeList(query.f_e_project), [query.f_e_project]);
   const searchTerm = decodeScalar(query.f_e_search, '').toLowerCase();
 
   const items = useMemo(

static/app/views/replays/detail/network/useNetworkFilters.spec.tsx

@@ -117,12 +117,12 @@ describe('useNetworkFilters', () => {
     const TYPE_OPTION = {
       value: 'resource.fetch',
       label: 'resource.fetch',
-      qs: 'f_n_type',
+      qs: 'f_n_type' as const,
     } as NetworkSelectOption;
     const STATUS_OPTION = {
       value: '200',
       label: '200',
-      qs: 'f_n_status',
+      qs: 'f_n_status' as const,
     } as NetworkSelectOption;
     const SEARCH_FILTER = 'pikachu';
 

static/app/views/replays/detail/network/useNetworkFilters.tsx

@@ -61,9 +61,9 @@ const FILTERS = {
 function useNetworkFilters({networkFrames}: Options): Return {
   const {setFilter, query} = useFiltersInLocationQuery<FilterFields>();
 
-  const method = decodeList(query.f_n_method);
-  const status = decodeList(query.f_n_status);
-  const type = decodeList(query.f_n_type);
+  const method = useMemo(() => decodeList(query.f_n_method), [query.f_n_method]);
+  const status = useMemo(() => decodeList(query.f_n_status), [query.f_n_status]);
+  const type = useMemo(() => decodeList(query.f_n_type), [query.f_n_type]);
   const searchTerm = decodeScalar(query.f_n_search, '').toLowerCase();
 
   // Need to clear Network Details URL params when we filter, otherwise you can