Fix all lint:js warnings and enforce zero-warning policy

settings/package.json

@@ -9,7 +9,7 @@
 		"build": "wp-scripts build --webpack-copy-php",
 		"format": "wp-scripts format",
 		"lint:css": "wp-scripts lint-style",
-		"lint:js": "wp-scripts lint-js",
+		"lint:js": "wp-scripts lint-js --max-warnings=0",
 		"packages-update": "wp-scripts packages-update",
 		"start": "wp-scripts start --webpack-copy-php",
 		"test:unit": "wp-scripts test-unit-js",

settings/src/components/auto-tabbing-input.js

@@ -11,40 +11,46 @@ import NumericControl from './numeric-control';
 const AutoTabbingInput = ( props ) => {
 	const { inputs, setInputs, error, setError } = props;
 
-	const handleChange = useCallback( ( value, event, index, inputRef ) => {
-		setInputs( ( prevInputs ) => {
-			const newInputs = [ ...prevInputs ];
+	const handleChange = useCallback(
+		( value, event, index, inputRef ) => {
+			setInputs( ( prevInputs ) => {
+				const newInputs = [ ...prevInputs ];
 
-			newInputs[ index ] = value.trim() === '' ? '' : value;
+				newInputs[ index ] = value.trim() === '' ? '' : value;
 
-			return newInputs;
-		} );
+				return newInputs;
+			} );
 
-		if ( value && '' !== value.trim() && inputRef.current.nextElementSibling ) {
-			inputRef.current.nextElementSibling.focus();
-		}
-	}, [] );
+			if ( value && '' !== value.trim() && inputRef.current.nextElementSibling ) {
+				inputRef.current.nextElementSibling.focus();
+			}
+		},
+		[ setInputs ]
+	);
 
 	const handleKeyDown = useCallback( ( value, event, index, inputRef ) => {
 		if ( event.key === 'Backspace' && ! value && inputRef.current.previousElementSibling ) {
 			inputRef.current.previousElementSibling.focus();
 		}
 	}, [] );
 
-	const handlePaste = useCallback( ( event ) => {
-		event.preventDefault();
+	const handlePaste = useCallback(
+		( event ) => {
+			event.preventDefault();
 
-		const newInputs = event.clipboardData
-			.getData( 'Text' )
-			.replace( /[^0-9]/g, '' )
-			.split( '' );
+			const newInputs = event.clipboardData
+				.getData( 'Text' )
+				.replace( /[^0-9]/g, '' )
+				.split( '' );
 
-		if ( inputs.length === newInputs.length ) {
-			setInputs( newInputs );
-		} else {
-			setError( 'The code you pasted is not the correct length.' );
-		}
-	}, [] );
+			if ( inputs.length === newInputs.length ) {
+				setInputs( newInputs );
+			} else {
+				setError( 'The code you pasted is not the correct length.' );
+			}
+		},
+		[ inputs.length, setInputs, setError ]
+	);
 
 	return (
 		<div

settings/src/components/backup-codes.js

@@ -96,7 +96,7 @@ function Setup( { setGenerating, onSuccess } ) {
 		};
 
 		generateCodes();
-	}, [] );
+	}, [ setBackupCodesVerified, setError, userRecord ] );
 
 	// Finish the setup process.
 	const handleFinished = useCallback( async () => {
@@ -106,7 +106,7 @@ function Setup( { setGenerating, onSuccess } ) {
 		setGlobalNotice( 'Backup codes have been enabled.' );
 		setGenerating( false );
 		onSuccess();
-	} );
+	}, [ setBackupCodesVerified, setGlobalNotice, setGenerating, onSuccess ] );
 
 	return (
 		<>

settings/src/components/email-address.js

@@ -51,7 +51,7 @@ export default function EmailAddress() {
 
 			setEmailError( message );
 		}
-	}, [] );
+	}, [ save ] );
 
 	const handleDiscard = useCallback( async () => {
 		try {
@@ -60,7 +60,7 @@ export default function EmailAddress() {
 		} catch ( error ) {
 			setEmailError( error.message );
 		}
-	}, [] );
+	}, [ edit, save ] );
 
 	return (
 		<>

settings/src/components/numeric-control.js

@@ -26,13 +26,13 @@ export default function NumericControl( props ) {
 	const handleChange = useCallback(
 		// Most callers will only need the value, so make it convenient for them.
 		( event ) => onChange && onChange( event.target.value, event, index, inputRef ),
-		[]
+		[ index, onChange ]
 	);
 
 	const handleKeyDown = useCallback(
 		// Most callers will only need the value, so make it convenient for them.
 		( event ) => onKeyDown && onKeyDown( event.target.value, event, index, inputRef ),
-		[]
+		[ index, onKeyDown ]
 	);
 
 	return (

settings/src/components/revalidate-modal.js

@@ -66,7 +66,7 @@ function RevalidateIframe() {
 		return () => {
 			window.removeEventListener( 'message', maybeRefreshUser );
 		};
-	}, [] );
+	}, [ record, userRecord ] );
 
 	return (
 		<iframe

settings/src/components/screen-link.js

@@ -34,7 +34,7 @@ export default function ScreenLink( { screen, anchorText, buttonStyle = false, a
 
 			navigateToScreen( screen );
 		},
-		[ navigateToScreen ]
+		[ navigateToScreen, screen, setBackupCodesVerified ]
 	);
 
 	return (

settings/src/components/svn-password.js

@@ -47,7 +47,7 @@ export default function SVNPassword() {
 		} catch ( apiFetchError ) {
 			setError( apiFetchError );
 		}
-	} );
+	}, [ userRecord, setError ] );
 
 	const getButtonText = useMemo( () => {
 		if ( isGenerating ) {

settings/src/components/totp.js

@@ -166,7 +166,7 @@ function Setup( { setSuccess } ) {
  * @param props.qrCodeUrl
  */
 function SetupMethodQRCode( { setSetupMethod, qrCodeUrl } ) {
-	const handleClick = useCallback( () => setSetupMethod( 'manual' ) );
+	const handleClick = useCallback( () => setSetupMethod( 'manual' ), [ setSetupMethod ] );
 
 	return (
 		<div className="wporg-2fa__totp_setup-method-container">
@@ -199,9 +199,10 @@ function SetupMethodQRCode( { setSetupMethod, qrCodeUrl } ) {
  * @param props.secretKey
  */
 function SetupMethodManual( { setSetupMethod, secretKey } ) {
-	const readableSecretKey = secretKey.match( /.{1,4}/g ).join( ' ' );
+	const groups = ( secretKey || '' ).match( /.{1,4}/g );
+	const readableSecretKey = groups ? groups.join( ' ' ) : '';
 
-	const handleClick = useCallback( () => setSetupMethod( 'qr-code' ) );
+	const handleClick = useCallback( () => setSetupMethod( 'qr-code' ), [ setSetupMethod ] );
 
 	return (
 		<div className="wporg-2fa__manual">
@@ -272,11 +273,11 @@ function SetupForm( {
 		if ( error && inputs.some( ( input, index ) => input !== prevInputs[ index ] ) ) {
 			setError( '' );
 		}
-	}, [ error, inputs, inputsRef ] );
+	}, [ error, inputs, setError ] );
 
 	const handleClearClick = useCallback( () => {
 		setInputs( Array( 6 ).fill( '' ) );
-	}, [] );
+	}, [ setInputs ] );
 
 	const canSubmit = qrCodeUrl && secretKey && inputs.every( ( input ) => !! input );
 

settings/src/components/webauthn/list-keys.js

@@ -47,7 +47,7 @@ export default function ListKeys() {
 		} finally {
 			setDeleting( false );
 		}
-	}, [ modalKey ] );
+	}, [ modalKey, setGlobalNotice, userRecord ] );
 
 	return (
 		<>

settings/src/components/webauthn/register-key.js

@@ -81,7 +81,7 @@ export default function RegisterKey( { onSuccess, onCancel } ) {
 				setRegisterCeremonyActive( false );
 			}
 		},
-		[ keyName ]
+		[ keyName, record, userRecord ]
 	);
 
 	if ( 'waiting' === step ) {

settings/src/script.js

@@ -6,6 +6,7 @@ import {
 	createContext,
 	useCallback,
 	useEffect,
+	useRef,
 	useState,
 	createRoot,
 } from '@wordpress/element';
@@ -62,37 +63,37 @@ function Main( { userId, isOnboarding } ) {
 	const [ error, setError ] = useState( '' );
 	const [ backupCodesVerified, setBackupCodesVerified ] = useState( true );
 
-	let currentUrl = new URL( document.location.href );
-	const initialScreen = currentUrl.searchParams.get( 'screen' );
+	const currentUrl = useRef( new URL( document.location.href ) );
+	const initialScreen = currentUrl.current.searchParams.get( 'screen' );
 	const [ screen, setScreen ] = useState( initialScreen === null ? 'home' : initialScreen );
 
 	// The screens where a recent two factor challenge is required.
 	const twoFactorRequiredScreens = [ 'webauthn', 'totp', 'backup-codes', 'svn-password' ];
 
+	// Trigger a re-render when the back/forward buttons are clicked.
+	const handlePopState = useCallback( () => {
+		currentUrl.current = new URL( document.location.href );
+		const newScreen = currentUrl.current.searchParams.get( 'screen' );
+
+		if ( newScreen ) {
+			setScreen( newScreen );
+		}
+	}, [] );
+
 	// Listen for back/forward button clicks.
 	useEffect( () => {
 		window.addEventListener( 'popstate', handlePopState );
 
 		return () => {
 			window.removeEventListener( 'popstate', handlePopState );
 		};
-	}, [] );
+	}, [ handlePopState ] );
 
 	useEffect( () => {
-		currentUrl.searchParams.set( 'screen', screen );
-		window.history.pushState( {}, '', currentUrl );
+		currentUrl.current.searchParams.set( 'screen', screen );
+		window.history.pushState( {}, '', currentUrl.current );
 	}, [ screen ] );
 
-	// Trigger a re-render when the back/forward buttons are clicked.
-	const handlePopState = useCallback( () => {
-		currentUrl = new URL( document.location.href );
-		const newScreen = currentUrl.searchParams.get( 'screen' );
-
-		if ( newScreen ) {
-			setScreen( newScreen );
-		}
-	}, [] );
-
 	/**
 	 * Update the screen without refreshing the page.
 	 *
@@ -112,15 +113,15 @@ function Main( { userId, isOnboarding } ) {
 				} );
 			}
 
-			currentUrl = new URL( document.location.href );
-			currentUrl.searchParams.set( 'screen', nextScreen );
-			window.history.pushState( {}, '', currentUrl );
+			currentUrl.current = new URL( document.location.href );
+			currentUrl.current.searchParams.set( 'screen', nextScreen );
+			window.history.pushState( {}, '', currentUrl.current );
 
 			setError( '' );
 			setGlobalNotice( '' );
 			setScreen( nextScreen );
 		},
-		[ hasEdits ]
+		[ hasEdits, edit, record ]
 	);
 
 	if ( ! hasResolved ) {