Fix dependencies on useCallback.

Fix depenencies on useCallback. Fix depenencies on useCallback. Fix depenencies on useCallback. Fix depenencies on useCallback.
google · Apr 20, 2021 · d8e741b · d8e741b
1 parent 24c7cf9
commit d8e741b
Show file tree

Hide file tree

Showing 50 changed files with 92 additions and 99 deletions.
diff --git a/assets/js/components/ActivateModuleCTA.js b/assets/js/components/ActivateModuleCTA.js
@@ -62,7 +62,7 @@ const ActivateModuleCTA = ( { moduleSlug, title, description } ) => {
 				type: 'win-error',
 			} );
 		}
-	}, [ activateModule ] );
+	}, [ activateModule, navigateTo, moduleSlug ] );
 
 	if ( ! module?.name || ! canManageOptions ) {
 		return null;

diff --git a/assets/js/components/CompleteModuleActivationCTA.js b/assets/js/components/CompleteModuleActivationCTA.js
@@ -44,7 +44,7 @@ const CompleteModuleActivationCTA = ( { moduleSlug, title, description } ) => {
 	const canManageOptions = useSelect( ( select ) => select( CORE_USER ).hasCapability( PERMISSION_MANAGE_OPTIONS ) );
 
 	const { navigateTo } = useDispatch( CORE_LOCATION );
-	const onCTAClick = useCallback( () => navigateTo( adminReauthURL ), [ adminReauthURL ] );
+	const onCTAClick = useCallback( () => navigateTo( adminReauthURL ), [ adminReauthURL, navigateTo ] );
 
 	if ( ! module?.name || ! adminReauthURL || ! canManageOptions ) {
 		return null;

diff --git a/assets/js/components/DateRangeSelector.js b/assets/js/components/DateRangeSelector.js
@@ -74,7 +74,7 @@ function DateRangeSelector() {
 	const handleMenuItemSelect = useCallback( ( index ) => {
 		setDateRange( Object.values( ranges )[ index ].slug );
 		setMenuOpen( false );
-	}, [ handleMenu ] );
+	}, [ ranges, setDateRange ] );
 
 	const currentDateRangeLabel = ranges[ dateRange ]?.label;
 	const menuItems = Object.values( ranges ).map( ( range ) => range.label );

diff --git a/assets/js/components/GoogleChart.js b/assets/js/components/GoogleChart.js
@@ -88,7 +88,7 @@ export default function GoogleChart( props ) {
 
 			setChart( googleChart );
 		}
-	}, [ loading, !! chartRef.current, visualizationLoaded, !! chart ] );
+	}, [ loading, visualizationLoaded, chart, chartID, chartType, onReady ] );
 
 	// Draw the chart whenever one of these properties has changed.
 	useEffect( () => {
@@ -126,10 +126,11 @@ export default function GoogleChart( props ) {
 		};
 	}, [
 		chart,
-		JSON.stringify( data ),
-		JSON.stringify( options ),
 		selectedStats,
 		singleStat,
+		chartID,
+		data,
+		options,
 	] );
 
 	useEffect( () => {

diff --git a/assets/js/components/ModulesList.js b/assets/js/components/ModulesList.js
@@ -72,7 +72,7 @@ function ModulesList( { moduleSlugs } ) {
 
 		// Redirect to ReAuthentication URL
 		navigateTo( response.moduleReauthURL );
-	}, [ activateModule ] );
+	}, [ activateModule, navigateTo ] );
 
 	if ( ! modulesData ) {
 		return null;

diff --git a/assets/js/components/OptIn.js b/assets/js/components/OptIn.js
@@ -56,7 +56,7 @@ export default function OptIn( { id, name, className, optinAction } ) {
 				trackEvent( 'tracking_plugin', optinAction );
 			}
 		}
-	}, [ enabled, optinAction ] );
+	}, [ optinAction, setTrackingEnabled ] );
 
 	if ( enabled === undefined ) {
 		return null;

diff --git a/assets/js/components/PermissionsModal/index.js b/assets/js/components/PermissionsModal/index.js
@@ -55,7 +55,7 @@ const PermissionsModal = () => {
 		// authorization page, do that first.
 		await snapshotAllStores( registry );
 		navigateTo( connectURL );
-	}, [ registry, connectURL ] );
+	}, [ registry, connectURL, navigateTo ] );
 
 	useEffect( () => {
 		// If error has flag to skip the modal, redirect to the authorization

diff --git a/assets/js/components/PostSearcher.js b/assets/js/components/PostSearcher.js
@@ -51,7 +51,7 @@ function PostSearcher() {
 	} );
 
 	const { navigateTo } = useDispatch( CORE_LOCATION );
-	const onClick = useCallback( () => navigateTo( detailsURL ), [ detailsURL ] );
+	const onClick = useCallback( () => navigateTo( detailsURL ), [ detailsURL, navigateTo ] );
 
 	return (
 		<div

diff --git a/assets/js/components/PostSearcherAutoSuggest.js b/assets/js/components/PostSearcherAutoSuggest.js
@@ -56,7 +56,7 @@ export default function PostSearcherAutoSuggest( { id, setCanSubmit, setMatch }
 		} else {
 			setCanSubmit( false );
 		}
-	}, [ results, setCanSubmit, setMatch ] );
+	}, [ results, setCanSubmit, setMatch, noResultsMessage ] );
 
 	const onInputChange = useCallback( ( event ) => {
 		setCanSubmit( false );

diff --git a/assets/js/components/UserMenu.js b/assets/js/components/UserMenu.js
@@ -105,7 +105,7 @@ function UserMenu() {
 			default:
 				handleMenu();
 		}
-	}, [ proxyPermissionsURL, handleMenu, handleDialog ] );
+	}, [ proxyPermissionsURL, handleMenu, handleDialog, navigateTo ] );
 
 	// Log the user out if they confirm the dialog.
 	const handleUnlinkConfirm = useCallback( () => {
@@ -117,7 +117,7 @@ function UserMenu() {
 
 		// Navigate back to the splash screen to reconnect.
 		navigateTo( postDisconnectURL );
-	}, [ postDisconnectURL ] );
+	}, [ postDisconnectURL, navigateTo ] );
 
 	if ( ! userEmail ) {
 		return null;

diff --git a/assets/js/components/activation/activation-app.js b/assets/js/components/activation/activation-app.js
@@ -54,7 +54,7 @@ export function ActivationApp() {
 		event.preventDefault();
 		await trackEvent( 'plugin_setup', proxySetupURL ? 'proxy_start_setup_banner' : 'goto_sitekit' );
 		navigateTo( buttonURL );
-	}, [ proxySetupURL, buttonURL ] );
+	}, [ proxySetupURL, buttonURL, navigateTo ] );
 
 	if ( ! buttonURL ) {
 		return null;

diff --git a/assets/js/components/help/HelpMenu.js b/assets/js/components/help/HelpMenu.js
@@ -66,7 +66,7 @@ function HelpMenu( { children } ) {
 
 	const handleMenuSelected = useCallback( () => {
 		toggleMenu( false );
-	} );
+	}, [] );
 
 	return (
 		<div className="googlesitekit-dropdown-menu googlesitekit-dropdown-menu__icon-menu googlesitekit-help-menu mdc-menu-surface--anchor">

diff --git a/assets/js/components/settings/SettingsActiveModule/ConfirmDisconnect.js b/assets/js/components/settings/SettingsActiveModule/ConfirmDisconnect.js
@@ -73,7 +73,7 @@ export default function ConfirmDisconnect( { slug, handleDialog } ) {
 			clearWebStorage();
 			global.location.assign( adminReauthURL );
 		}
-	}, [ module?.slug ] );
+	}, [ adminReauthURL, deactivateModule, module.forceActive, slug ] );
 
 	if ( ! module ) {
 		return null;

diff --git a/assets/js/components/settings/SettingsActiveModules.js b/assets/js/components/settings/SettingsActiveModules.js
@@ -62,7 +62,7 @@ export default function SettingsActiveModules( { activeModule, moduleState, setM
 			setModuleState( slug, 'view' );
 			clearWebStorage();
 		}
-	}, [ setModuleState ] );
+	}, [ setModuleState, submitChanges ] );
 
 	const onToggle = useCallback( ( slug, e ) => {
 		// Set focus on heading when clicked.

diff --git a/assets/js/components/settings/SetupModule.js b/assets/js/components/settings/SetupModule.js
@@ -68,7 +68,7 @@ export default function SetupModule( {
 			} );
 			setIsSaving( false );
 		}
-	} );
+	}, [ activateModule, navigateTo, slug ] );
 
 	const canActivateModule = useSelect( ( select ) => select( CORE_MODULES ).canActivateModule( slug ) );
 

diff --git a/assets/js/components/setup/ModuleSetup.js b/assets/js/components/setup/ModuleSetup.js
@@ -73,7 +73,7 @@ export default function ModuleSetup( { moduleSlug } ) {
 		}
 
 		navigateTo( redirectURL );
-	}, [ moduleSlug ] );
+	}, [ moduleSlug, navigateTo ] );
 
 	if ( ! module?.SetupComponent ) {
 		return null;

diff --git a/assets/js/components/setup/SetupUsingProxy.js b/assets/js/components/setup/SetupUsingProxy.js
@@ -77,7 +77,7 @@ function SetupUsingProxy() {
 		event.preventDefault();
 		await trackEvent( 'plugin_setup', 'proxy_start_setup_landing_page' );
 		navigateTo( proxySetupURL );
-	}, [ proxySetupURL ] );
+	}, [ proxySetupURL, navigateTo ] );
 
 	// @TODO: this needs to be migrated to the core/site datastore in the future
 	const { errorMessage } = global._googlesitekitLegacyData.setup;

diff --git a/assets/js/components/user-input/UserInputKeywords.js b/assets/js/components/user-input/UserInputKeywords.js
@@ -57,9 +57,6 @@ export default function UserInputKeywords( { slug, max } ) {
 	// https://github.com/google/site-kit-wp/issues/2900#issuecomment-814843972.
 	const [ localValues, setLocalValues ] = useState( values );
 
-	// Need to make sure that dependencies list always has the same number of elements.
-	const dependencies = values.concat( Array( max ) ).slice( 0, max );
-
 	const focusInput = ( querySelector ) => {
 		const input = keywordsContainer.current.querySelector( querySelector );
 		if ( input ) {
@@ -74,11 +71,11 @@ export default function UserInputKeywords( { slug, max } ) {
 		] );
 		// After deleting a keyword, hitting backspace will delete the next keyword.
 		setCanDeleteKeyword( true );
-	}, dependencies, canDeleteKeyword );
+	}, [ updateKeywords, values ], canDeleteKeyword );
 
 	const onKeywordDelete = useCallback( ( index ) => {
 		deleteKeyword( index );
-	}, dependencies );
+	}, [ deleteKeyword ] );
 
 	const updateKeywords = useCallback( ( keywords ) => {
 		const EOT = String.fromCharCode( 4 );
@@ -98,7 +95,7 @@ export default function UserInputKeywords( { slug, max } ) {
 
 		setLocalValues( newKeywords );
 		setUserInputSetting( slug, newKeywords );
-	}, [ slug ] );
+	}, [ slug, max, setUserInputSetting ] );
 
 	const onKeywordChange = useCallback( ( index, { target } ) => {
 		if ( target.value[ target.value.length - 1 ] === ',' ) {
@@ -110,7 +107,7 @@ export default function UserInputKeywords( { slug, max } ) {
 			target.value,
 			...values.slice( index + 1 ),
 		] );
-	}, dependencies );
+	}, [ updateKeywords, values ] );
 
 	const onKeyDown = useCallback( ( index, { keyCode, target } ) => {
 		const nonEmptyValues = values.filter( ( value ) => value.length > 0 );
@@ -142,7 +139,7 @@ export default function UserInputKeywords( { slug, max } ) {
 			// User is typing, so pressing backspace should delete the last character rather than the keyword.
 			setCanDeleteKeyword( false );
 		}
-	}, [ keywordsContainer.current, ...dependencies, canDeleteKeyword ] );
+	}, [ deleteKeyword, max, slug, updateKeywords, values ] );
 
 	return (
 		<Cell lgStart={ 6 } lgSize={ 6 } mdSize={ 8 } smSize={ 4 }>

diff --git a/assets/js/components/user-input/UserInputQuestionnaire.js b/assets/js/components/user-input/UserInputQuestionnaire.js
@@ -48,9 +48,9 @@ import { Cell, Row } from '../../material-components';
 import { trackEvent } from '../../util';
 const { useSelect, useDispatch } = Data;
 
-export default function UserInputQuestionnaire() {
-	const steps = [ ...USER_INPUT_QUESTIONS_LIST, 'preview' ];
+const steps = [ ...USER_INPUT_QUESTIONS_LIST, 'preview' ];
 
+export default function UserInputQuestionnaire() {
 	const [ activeSlug, setActiveSlug ] = useQueryArg( 'question', steps[ 0 ] );
 	const [ shouldScrollToActiveQuestion, setShouldScrollToActiveQuestion ] = useState( false );
 	const [ redirectURL ] = useQueryArg( 'redirect_url' );
@@ -83,7 +83,7 @@ export default function UserInputQuestionnaire() {
 		if ( activeSlugIndex > answeredUntilIndex ) {
 			setActiveSlug( steps[ answeredUntilIndex ] );
 		}
-	}, [ answeredUntilIndex, activeSlugIndex ] );
+	}, [ answeredUntilIndex, activeSlugIndex, setActiveSlug ] );
 
 	useEffect( () => {
 		if ( activeSlug === 'preview' ) {
@@ -103,7 +103,7 @@ export default function UserInputQuestionnaire() {
 	const next = useCallback( () => {
 		trackEvent( 'user_input', 'question_advance', steps[ activeSlugIndex ] );
 		setActiveSlug( steps[ activeSlugIndex + 1 ] );
-	}, [ activeSlugIndex ] );
+	}, [ activeSlugIndex, setActiveSlug ] );
 
 	const goTo = useCallback( ( num = 1, singleType = false ) => {
 		trackEvent(
@@ -118,12 +118,12 @@ export default function UserInputQuestionnaire() {
 		if ( steps.length >= num && num > 0 ) {
 			setActiveSlug( steps[ num - 1 ] );
 		}
-	}, [ activeSlugIndex, isSettings ] );
+	}, [ setActiveSlug, setSingle ] );
 
 	const back = useCallback( () => {
 		trackEvent( 'user_input', 'question_return', steps[ activeSlugIndex ] );
 		setActiveSlug( steps[ activeSlugIndex - 1 ] );
-	}, [ activeSlugIndex ] );
+	}, [ activeSlugIndex, setActiveSlug ] );
 
 	const submitChanges = useCallback( async () => {
 		trackEvent(
@@ -142,12 +142,12 @@ export default function UserInputQuestionnaire() {
 
 			navigateTo( url.toString() );
 		}
-	}, [ dashboardURL, isSettings ] );
+	}, [ dashboardURL, isSettings, navigateTo, redirectURL, activeSlugIndex, saveUserInputSettings ] );
 
 	const goToPreview = useCallback( () => {
 		trackEvent( 'user_input', 'question_update', steps[ activeSlugIndex ] );
 		setActiveSlug( steps[ steps.length - 1 ] );
-	}, [ activeSlugIndex ] );
+	}, [ activeSlugIndex, setActiveSlug ] );
 
 	useEffect( () => {
 		if ( ! shouldScrollToActiveQuestion ) {
@@ -156,7 +156,7 @@ export default function UserInputQuestionnaire() {
 		}
 
 		global.document?.querySelector( '.googlesitekit-user-input__header' )?.scrollIntoView( { behavior: 'smooth' } );
-	}, [ activeSlug ] );
+	}, [ activeSlug, shouldScrollToActiveQuestion ] );
 
 	// Update the callbacks and labels for the questions if the user is editing a *single question*.
 	let backCallback = back;

diff --git a/assets/js/components/user-input/UserInputSelectOptions.js b/assets/js/components/user-input/UserInputSelectOptions.js
@@ -44,9 +44,6 @@ export default function UserInputSelectOptions( { slug, options, max } ) {
 	const inputRef = useRef();
 	const [ disabled, setDisabled ] = useState( false );
 
-	// Need to make sure that dependencies list always has the same number of elements.
-	const dependencies = values.concat( Array( max ) ).slice( 0, max );
-
 	const onClick = useCallback( ( event ) => {
 		const { target } = event;
 		const { value, checked, name, type, id } = target;
@@ -82,7 +79,7 @@ export default function UserInputSelectOptions( { slug, options, max } ) {
 		}
 
 		setUserInputSetting( slug, Array.from( newValues ).slice( 0, max ) );
-	}, dependencies );
+	}, [ max, other, setUserInputSetting, slug, values ] );
 
 	const onOtherChange = useCallback( ( { target } ) => {
 		const newValues = [
@@ -92,7 +89,7 @@ export default function UserInputSelectOptions( { slug, options, max } ) {
 
 		setOther( target.value );
 		setUserInputSetting( slug, newValues.slice( 0, max ) );
-	}, dependencies );
+	}, [ max, setUserInputSetting, slug, values, options ] );
 
 	const onClickProps = {
 		[ max > 1 ? 'onChange' : 'onClick' ]: onClick,

diff --git a/assets/js/googlesitekit/widgets/components/URLSearchWidget.js b/assets/js/googlesitekit/widgets/components/URLSearchWidget.js
@@ -43,7 +43,7 @@ function URLSearchWidget( { Widget } ) {
 		if ( match?.permalink ) {
 			navigateTo( detailsURL );
 		}
-	}, [ detailsURL, match ] );
+	}, [ detailsURL, match, navigateTo ] );
 
 	return (
 		<div className="mdc-layout-grid__cell">

diff --git a/assets/js/modules/adsense/components/common/AccountSelect.js b/assets/js/modules/adsense/components/common/AccountSelect.js
@@ -44,7 +44,7 @@ export default function AccountSelect() {
 		if ( accountID !== newAccountID ) {
 			setAccountID( newAccountID );
 		}
-	}, [ accountID ] );
+	}, [ accountID, setAccountID ] );
 
 	if ( ! hasResolvedAccounts ) {
 		return <ProgressBar small />;

diff --git a/assets/js/modules/adsense/components/common/UseSnippetSwitch.js b/assets/js/modules/adsense/components/common/UseSnippetSwitch.js
@@ -55,7 +55,7 @@ export default function UseSnippetSwitch( props ) {
 		if ( saveOnChange ) {
 			await saveSettings();
 		}
-	}, [ useSnippet ] );
+	}, [ useSnippet, saveOnChange, setUseSnippet, saveSettings ] );
 
 	if ( undefined === useSnippet ) {
 		return null;

diff --git a/assets/js/modules/adsense/components/common/WebStoriesAdUnitSelect.js b/assets/js/modules/adsense/components/common/WebStoriesAdUnitSelect.js
@@ -47,7 +47,7 @@ export default function WebStoriesAdUnitSelect() {
 		if ( webStoriesAdUnit !== newWebStoriesAdUnit ) {
 			setWebStoriesAdUnit( newWebStoriesAdUnit );
 		}
-	}, [ webStoriesAdUnit ] );
+	}, [ webStoriesAdUnit, setWebStoriesAdUnit ] );
 
 	if ( ! hasResolvedAdUnits ) {
 		return <ProgressBar small />;

diff --git a/assets/js/modules/adsense/components/setup/SetupAccountApproved.js b/assets/js/modules/adsense/components/setup/SetupAccountApproved.js
@@ -49,7 +49,7 @@ export default function SetupAccountApproved() {
 			return;
 		}
 		await completeAccountSetup();
-	}, [ isDoingSubmitChanges ] );
+	}, [ isDoingSubmitChanges, completeAccountSetup ] );
 
 	if ( undefined === existingTag || undefined === originalAccountStatus ) {
 		return null;

diff --git a/assets/js/modules/adsense/components/setup/SetupSiteAdded.js b/assets/js/modules/adsense/components/setup/SetupSiteAdded.js
@@ -52,7 +52,7 @@ export default function SetupSiteAdded( { finishSetup } ) {
 			await trackEvent( 'adsense_setup', 'complete_adsense_setup' );
 			finishSetup();
 		}
-	}, [ isDoingSubmitChanges, finishSetup ] );
+	}, [ isDoingSubmitChanges, finishSetup, completeSiteSetup ] );
 
 	return (
 		<Fragment>

diff --git a/assets/js/modules/analytics/components/common/AccountCreate/CountrySelect.js b/assets/js/modules/analytics/components/common/AccountCreate/CountrySelect.js
@@ -48,7 +48,7 @@ export default function CountrySelect() {
 				timezone: countriesByCode[ newCountryCode ].defaultTimeZoneId,
 			} );
 		}
-	}, [ setValues ] );
+	}, [ setValues, value ] );
 
 	return (
 		<Select
-Original file line number
+Diff line change
@@ Expand Up / @@ -68,7 +68,7 @@ export default function SetupModule( { @@
     			} );
     			setIsSaving( false );
     		}
-    	} );
+    	}, [ activateModule, navigateTo, slug ] );
     	const canActivateModule = useSelect( ( select ) => select( CORE_MODULES ).canActivateModule( slug ) );
@@ Expand Down @@