useMemo with debounce (#1715)

* useMemo with debounce

`debounce` requires memoization, otherwise every component re-render recreates the debouncing function. We change some existing, memoized instances of `debounce` using `useCallback` to use `useMemo` primarily to address (es)linting issues.

Fixes: https://mattermost.atlassian.net/browse/MM-48509

* not.exists is safer than not.be.visible

* simplify usePlaybooksCrud

Author: lieut-data

tests-e2e/cypress/integration/playbooks/edit_spec.js

@@ -555,7 +555,7 @@ describe('playbooks > edit', () => {
                             .click({force: true});
 
                         // * Verify that the confirmation dialog is closed
-                        cy.get('#confirmModal').should('not.be.visible');
+                        cy.get('#confirmModal').should('not.exist');
 
                         cy.reload();
 
@@ -612,7 +612,7 @@ describe('playbooks > edit', () => {
                             .click({force: true});
 
                         // * Verify that confirmation dialog is closed
-                        cy.get('#confirmModal').should('not.be.visible');
+                        cy.get('#confirmModal').should('not.exist');
 
                         cy.reload();
 

tests-e2e/cypress/integration/runs/rdp_main_retrospective_spec.js

@@ -247,6 +247,7 @@ describe('runs > run details page', () => {
                     testRun = playbookRun;
                 });
             });
+
             beforeEach(() => {
                 cy.visit(`/playbooks/runs/${testRun.id}`);
             });
@@ -297,8 +298,7 @@ describe('runs > run details page', () => {
                 });
             });
 
-            // skipped flaky test: https://mattermost.atlassian.net/browse/MM-48509
-            it.skip('auto save', () => {
+            it('auto save', () => {
                 getRetro().within(() => {
                     // # Enter metric values
                     cy.get('input[type=text]').eq(0).click();

webapp/src/components/backstage/playbook_runs/playbook_run/retrospective.tsx

@@ -1,4 +1,4 @@
-import React, {useRef, useState} from 'react';
+import React, {useMemo, useRef, useState} from 'react';
 import styled from 'styled-components';
 import {useIntl} from 'react-intl';
 import debounce from 'debounce';
@@ -40,6 +40,19 @@ const Retrospective = ({
     const childRef = useRef<any>();
     const metricsAvailable = useAllowPlaybookAndRunMetrics();
 
+    const onMetricsChange = useMemo(
+        () => debounce((metrics_data: RunMetricData[]) => {
+            updateRetrospective(playbookRun.id, playbookRun.retrospective, metrics_data);
+        }, DEBOUNCE_2_SECS),
+        [playbookRun.id, playbookRun.retrospective],
+    );
+    const onReportChange = useMemo(
+        () => debounce((retrospective: string) => {
+            updateRetrospective(playbookRun.id, retrospective, playbookRun.metrics_data);
+        }, DEBOUNCE_2_SECS),
+        [playbookRun.id, playbookRun.metrics_data],
+    );
+
     if (!playbookRun.retrospective_enabled) {
         return null;
     }
@@ -113,13 +126,6 @@ const Retrospective = ({
         );
     };
 
-    const onMetricsChange = debounce((metrics_data: RunMetricData[]) => {
-        updateRetrospective(playbookRun.id, playbookRun.retrospective, metrics_data);
-    }, DEBOUNCE_2_SECS);
-    const onReportChange = debounce((retrospective: string) => {
-        updateRetrospective(playbookRun.id, retrospective, playbookRun.metrics_data);
-    }, DEBOUNCE_2_SECS);
-
     return (
         <Container
             id={id}

webapp/src/components/backstage/profile_autocomplete.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {debounce} from 'debounce';
 import AsyncSelect from 'react-select/async';
@@ -119,7 +119,7 @@ const ProfileAutocomplete = (props: Props) => {
         );
     };
 
-    const debouncedSearchProfiles = debounce((term: string, callback: (options: OptionsType<UserProfile>) => void) => {
+    const debouncedSearchProfiles = useMemo(() => debounce((term: string, callback: (options: OptionsType<UserProfile>) => void) => {
         let profiles;
         if (term.trim().length === 0) {
             profiles = props.getProfiles?.();
@@ -135,7 +135,7 @@ const ProfileAutocomplete = (props: Props) => {
             console.error('Error searching user profiles in custom attribute settings dropdown.');
             callback([]);
         });
-    }, 150);
+    }, 150), [props]);
 
     const usersLoader = (term: string, callback: (options: OptionsType<UserProfile>) => void) => {
         try {

webapp/src/components/backstage/runs_list/filters.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import debounce from 'debounce';
 import {ControlProps, components} from 'react-select';
 import styled from 'styled-components';
@@ -145,12 +145,17 @@ const Filters = ({fetchParams, setFetchParams, fixedPlaybook, fixedFinished}: Pr
         return playbooks ? playbooks.items : [] as Playbook[];
     }
 
+    const onSearch = useMemo(
+        () => debounce(setSearchTerm, searchDebounceDelayMilliseconds),
+        [setSearchTerm],
+    );
+
     return (
         <PlaybookRunListFilters>
             <SearchInput
                 testId={'search-filter'}
                 default={fetchParams.search_term}
-                onSearch={debounce(setSearchTerm, searchDebounceDelayMilliseconds)}
+                onSearch={onSearch}
                 placeholder={formatMessage({defaultMessage: 'Search by run name'})}
             />
             <CheckboxInput

webapp/src/components/datetime_input.tsx

@@ -101,7 +101,7 @@ const DateTimeInput = ({
         const datetimes = parseDateTimes(locale, query)?.map(({start}) => DateTime.fromJSDate(start.date()));
         const duration = parse(locale, query, Mode.DurationValue);
         setOptions(makeOptions(query, datetimes, duration ? [duration] : [], mode) || null);
-    }, 150), [locale, setOptions, makeOptions]);
+    }, 150), [locale, setOptions, makeOptions, mode]);
 
     return (
         <StyledSelect

webapp/src/components/datetime_selector.tsx

@@ -121,7 +121,7 @@ export const DateTimeSelector = ({
         const duration = parse(locale, query, Mode.DurationValue);
 
         setOptionsDateTime(makeOptions?.(query, datetimes, duration ? [duration] : [], mode) ?? suggestedOptions);
-    }, 150), [makeOptions, suggestedOptions, mode]);
+    }, 150), [locale, makeOptions, suggestedOptions, mode]);
 
     const noDropdown = {DropdownIndicator: null, IndicatorSeparator: null};
     const components = props.customControl ? {

webapp/src/components/rhs/rhs_run_list.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 import styled from 'styled-components';
@@ -91,7 +91,7 @@ const RHSRunList = (props: Props) => {
     const currentTeamId = useSelector(getCurrentTeamId);
     const currentChannelId = useSelector(getCurrentChannelId);
     const [loadingMore, setLoadingMore] = useState(false);
-    const debouncedSetLoadingMore = debounce(setLoadingMore, 100);
+    const debouncedSetLoadingMore = useMemo(() => debounce(setLoadingMore, 100), [setLoadingMore]);
     const getMore = async () => {
         debouncedSetLoadingMore(true);
         await props.getMore();

webapp/src/components/widgets/text_with_tooltip.tsx

@@ -2,6 +2,7 @@ import React, {
     ComponentProps,
     useCallback,
     useEffect,
+    useMemo,
     useRef,
     useState,
 } from 'react';
@@ -21,7 +22,7 @@ const TextWithTooltip = (props: Props) => {
     const ref = useRef<HTMLAnchorElement|null>(null);
     const [showTooltip, setShowTooltip] = useState(false);
 
-    const resizeListener = useCallback(debounce(() => {
+    const resizeListener = useMemo(() => debounce(() => {
         if (ref?.current && ref?.current?.offsetWidth < ref?.current?.scrollWidth) {
             setShowTooltip(true);
         } else {

webapp/src/hooks/crud.ts

@@ -1,4 +1,4 @@
-import {useEffect, useState} from 'react';
+import {useEffect, useMemo, useState} from 'react';
 import debounce from 'debounce';
 import {useIntl} from 'react-intl';
 
@@ -155,11 +155,16 @@ export function usePlaybooksCrud(
         setParams({sort: colName, direction: 'desc'});
     };
 
-    const setSearchTerm = (term: string) => {
-        setLoading(true);
-        setParams({search_term: term, page: 0});
-    };
-    const setSearchTermDebounced = debounce(setSearchTerm, searchDebounceDelayMilliseconds);
+    const setSearchTermDebounced = useMemo(
+        () => debounce(
+            (term: string) => {
+                setLoading(true);
+                setParams({search_term: term, page: 0});
+            },
+            searchDebounceDelayMilliseconds
+        ),
+        [setLoading, setParams],
+    );
 
     const setWithArchived = (with_archived: boolean) => {
         setLoading(true);

webapp/src/hooks/general.ts

@@ -667,7 +667,7 @@ export const useProxyState = <T>(
         setValue(prop);
     }, [prop]);
 
-    const onChangeDebounced = useCallback(debounce((v) => {
+    const onChangeDebounced = useMemo(() => debounce((v) => {
         check.current = v; // send check
         onChange(v);
     }, wait), [wait, onChange]);