Rename refs to fix tons of 'Mutating a value' errors (WordPress#64718)

Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
bph · Aug 31, 2024 · 4bb6b24 · 4bb6b24
1 parent 2eab98d
commit 4bb6b24
Show file tree

Hide file tree

Showing 53 changed files with 382 additions and 364 deletions.
diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js
@@ -62,7 +62,7 @@ const BlockDraggable = ( {
 		[ clientIds ]
 	);
 
-	const isDragging = useRef( false );
+	const isDraggingRef = useRef( false );
 	const [ startScrolling, scrollOnDragOver, stopScrolling ] =
 		useScrollWhenDragging();
 
@@ -75,7 +75,7 @@ const BlockDraggable = ( {
 	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {
 		return () => {
-			if ( isDragging.current ) {
+			if ( isDraggingRef.current ) {
 				stopDraggingBlocks();
 			}
 		};
@@ -193,7 +193,7 @@ const BlockDraggable = ( {
 				// frame to enable dragging.
 				window.requestAnimationFrame( () => {
 					startDraggingBlocks( clientIds );
-					isDragging.current = true;
+					isDraggingRef.current = true;
 
 					startScrolling( event );
 
@@ -205,7 +205,7 @@ const BlockDraggable = ( {
 			onDragOver={ scrollOnDragOver }
 			onDragEnd={ () => {
 				stopDraggingBlocks();
-				isDragging.current = false;
+				isDraggingRef.current = false;
 
 				stopScrolling();
 

diff --git a/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.js b/packages/block-editor/src/components/block-draggable/use-scroll-when-dragging.js
@@ -18,51 +18,51 @@ const VELOCITY_MULTIPLIER =
  *                      and `onDragEnd` events respectively.
  */
 export default function useScrollWhenDragging() {
-	const dragStartY = useRef( null );
-	const velocityY = useRef( null );
-	const scrollParentY = useRef( null );
-	const scrollEditorInterval = useRef( null );
+	const dragStartYRef = useRef( null );
+	const velocityYRef = useRef( null );
+	const scrollParentYRef = useRef( null );
+	const scrollEditorIntervalRef = useRef( null );
 
 	// Clear interval when unmounting.
 	useEffect(
 		() => () => {
-			if ( scrollEditorInterval.current ) {
-				clearInterval( scrollEditorInterval.current );
-				scrollEditorInterval.current = null;
+			if ( scrollEditorIntervalRef.current ) {
+				clearInterval( scrollEditorIntervalRef.current );
+				scrollEditorIntervalRef.current = null;
 			}
 		},
 		[]
 	);
 
 	const startScrolling = useCallback( ( event ) => {
-		dragStartY.current = event.clientY;
+		dragStartYRef.current = event.clientY;
 
 		// Find nearest parent(s) to scroll.
-		scrollParentY.current = getScrollContainer( event.target );
+		scrollParentYRef.current = getScrollContainer( event.target );
 
-		scrollEditorInterval.current = setInterval( () => {
-			if ( scrollParentY.current && velocityY.current ) {
+		scrollEditorIntervalRef.current = setInterval( () => {
+			if ( scrollParentYRef.current && velocityYRef.current ) {
 				const newTop =
-					scrollParentY.current.scrollTop + velocityY.current;
+					scrollParentYRef.current.scrollTop + velocityYRef.current;
 
 				// Setting `behavior: 'smooth'` as a scroll property seems to hurt performance.
 				// Better to use a small scroll interval.
-				scrollParentY.current.scroll( {
+				scrollParentYRef.current.scroll( {
 					top: newTop,
 				} );
 			}
 		}, SCROLL_INTERVAL_MS );
 	}, [] );
 
 	const scrollOnDragOver = useCallback( ( event ) => {
-		if ( ! scrollParentY.current ) {
+		if ( ! scrollParentYRef.current ) {
 			return;
 		}
-		const scrollParentHeight = scrollParentY.current.offsetHeight;
+		const scrollParentHeight = scrollParentYRef.current.offsetHeight;
 		const offsetDragStartPosition =
-			dragStartY.current - scrollParentY.current.offsetTop;
+			dragStartYRef.current - scrollParentYRef.current.offsetTop;
 		const offsetDragPosition =
-			event.clientY - scrollParentY.current.offsetTop;
+			event.clientY - scrollParentYRef.current.offsetTop;
 
 		if ( event.clientY > offsetDragStartPosition ) {
 			// User is dragging downwards.
@@ -82,7 +82,7 @@ export default function useScrollWhenDragging() {
 				moveableDistance === 0 || dragDistance === 0
 					? 0
 					: dragDistance / moveableDistance;
-			velocityY.current = VELOCITY_MULTIPLIER * distancePercentage;
+			velocityYRef.current = VELOCITY_MULTIPLIER * distancePercentage;
 		} else if ( event.clientY < offsetDragStartPosition ) {
 			// User is dragging upwards.
 			const moveableDistance = Math.max(
@@ -99,19 +99,19 @@ export default function useScrollWhenDragging() {
 				moveableDistance === 0 || dragDistance === 0
 					? 0
 					: dragDistance / moveableDistance;
-			velocityY.current = -VELOCITY_MULTIPLIER * distancePercentage;
+			velocityYRef.current = -VELOCITY_MULTIPLIER * distancePercentage;
 		} else {
-			velocityY.current = 0;
+			velocityYRef.current = 0;
 		}
 	}, [] );
 
 	const stopScrolling = () => {
-		dragStartY.current = null;
-		scrollParentY.current = null;
+		dragStartYRef.current = null;
+		scrollParentYRef.current = null;
 
-		if ( scrollEditorInterval.current ) {
-			clearInterval( scrollEditorInterval.current );
-			scrollEditorInterval.current = null;
+		if ( scrollEditorIntervalRef.current ) {
+			clearInterval( scrollEditorIntervalRef.current );
+			scrollEditorIntervalRef.current = null;
 		}
 	};
 

diff --git a/packages/block-editor/src/components/block-lock/toolbar.js b/packages/block-editor/src/components/block-lock/toolbar.js
@@ -20,7 +20,7 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
-	const hasLockButtonShown = useRef( false );
+	const hasLockButtonShownRef = useRef( false );
 
 	// If the block lock button has been shown, we don't want to remove it
 	// from the toolbar until the toolbar is rendered again without it.
@@ -29,11 +29,11 @@ export default function BlockLockToolbar( { clientId } ) {
 	// whence it came, and to do that, we need to leave the button in the toolbar.
 	useEffect( () => {
 		if ( isLocked ) {
-			hasLockButtonShown.current = true;
+			hasLockButtonShownRef.current = true;
 		}
 	}, [ isLocked ] );
 
-	if ( ! isLocked && ! hasLockButtonShown.current ) {
+	if ( ! isLocked && ! hasLockButtonShownRef.current ) {
 		return null;
 	}
 

diff --git a/packages/block-editor/src/components/block-tools/block-toolbar-popover.js b/packages/block-editor/src/components/block-tools/block-toolbar-popover.js
@@ -36,15 +36,15 @@ export default function BlockToolbarPopover( {
 	}, [ clientId ] );
 
 	const { stopTyping } = useDispatch( blockEditorStore );
-	const isToolbarForced = useRef( false );
+	const isToolbarForcedRef = useRef( false );
 
 	useShortcut( 'core/block-editor/focus-toolbar', () => {
-		isToolbarForced.current = true;
+		isToolbarForcedRef.current = true;
 		stopTyping( true );
 	} );
 
 	useEffect( () => {
-		isToolbarForced.current = false;
+		isToolbarForcedRef.current = false;
 	} );
 
 	const popoverProps = useBlockToolbarPopoverProps( {
@@ -66,7 +66,7 @@ export default function BlockToolbarPopover( {
 				<PrivateBlockToolbar
 					// If the toolbar is being shown because of being forced
 					// it should focus the toolbar right after the mount.
-					focusOnMount={ isToolbarForced.current }
+					focusOnMount={ isToolbarForcedRef.current }
 					__experimentalInitialIndex={
 						initialToolbarItemIndexRef.current
 					}

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -122,7 +122,7 @@ function Iframe( {
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const prevContainerWidth = useRef();
+	const prevContainerWidthRef = useRef();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -243,7 +243,7 @@ function Iframe( {
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
-			prevContainerWidth.current = containerWidth;
+			prevContainerWidthRef.current = containerWidth;
 		}
 	}, [ containerWidth, isZoomedOut ] );
 
@@ -310,7 +310,7 @@ function Iframe( {
 			'--wp-block-editor-iframe-zoom-out-scale',
 			scale === 'default'
 				? Math.min( containerWidth, maxWidth ) /
-						prevContainerWidth.current
+						prevContainerWidthRef.current
 				: scale
 		);
 		iframeDocument.documentElement.style.setProperty(
@@ -331,7 +331,7 @@ function Iframe( {
 		);
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-prev-container-width',
-			`${ prevContainerWidth.current }px`
+			`${ prevContainerWidthRef.current }px`
 		);
 
 		return () => {
@@ -456,7 +456,7 @@ function Iframe( {
 					'--wp-block-editor-iframe-zoom-out-container-width':
 						isZoomedOut && `${ containerWidth }px`,
 					'--wp-block-editor-iframe-zoom-out-prev-container-width':
-						isZoomedOut && `${ prevContainerWidth.current }px`,
+						isZoomedOut && `${ prevContainerWidthRef.current }px`,
 				} }
 			>
 				{ iframe }

diff --git a/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js b/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js
@@ -52,7 +52,7 @@ export default function useInnerBlockTemplateSync(
 		useDispatch( blockEditorStore );
 
 	// Maintain a reference to the previous value so we can do a deep equality check.
-	const existingTemplate = useRef( null );
+	const existingTemplateRef = useRef( null );
 
 	useLayoutEffect( () => {
 		let isCancelled = false;
@@ -76,14 +76,14 @@ export default function useInnerBlockTemplateSync(
 
 			const hasTemplateChanged = ! fastDeepEqual(
 				template,
-				existingTemplate.current
+				existingTemplateRef.current
 			);
 
 			if ( ! shouldApplyTemplate || ! hasTemplateChanged ) {
 				return;
 			}
 
-			existingTemplate.current = template;
+			existingTemplateRef.current = template;
 			const nextBlocks = synchronizeBlocksWithTemplate(
 				currentInnerBlocks,
 				template

diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -32,7 +32,7 @@ function InserterListItem( {
 	isDraggable,
 	...props
 } ) {
-	const isDragging = useRef( false );
+	const isDraggingRef = useRef( false );
 	const itemIconStyle = item.icon
 		? {
 				backgroundColor: item.icon.background,
@@ -70,14 +70,14 @@ function InserterListItem( {
 					) }
 					draggable={ draggable }
 					onDragStart={ ( event ) => {
-						isDragging.current = true;
+						isDraggingRef.current = true;
 						if ( onDragStart ) {
 							onHover( null );
 							onDragStart( event );
 						}
 					} }
 					onDragEnd={ ( event ) => {
-						isDragging.current = false;
+						isDraggingRef.current = false;
 						if ( onDragEnd ) {
 							onDragEnd( event );
 						}
@@ -110,7 +110,7 @@ function InserterListItem( {
 							}
 						} }
 						onMouseEnter={ () => {
-							if ( isDragging.current ) {
+							if ( isDraggingRef.current ) {
 								return;
 							}
 							onHover( item );

diff --git a/packages/block-editor/src/components/inserter/media-tab/hooks.js b/packages/block-editor/src/components/inserter/media-tab/hooks.js
@@ -31,18 +31,18 @@ export function useMediaResults( category, query = {} ) {
 	// In the future we could use AbortController to cancel previous
 	// requests, but we don't for now as it involves adding support
 	// for this to `core-data` package.
-	const lastRequest = useRef();
+	const lastRequestRef = useRef();
 	useEffect( () => {
 		( async () => {
 			const key = JSON.stringify( {
 				category: category.name,
 				...query,
 			} );
-			lastRequest.current = key;
+			lastRequestRef.current = key;
 			setIsLoading( true );
 			setMediaList( [] ); // Empty the previous results.
 			const _media = await category.fetch?.( query );
-			if ( key === lastRequest.current ) {
+			if ( key === lastRequestRef.current ) {
 				setMediaList( _media );
 				setIsLoading( false );
 			}

diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
@@ -180,10 +180,10 @@ function LinkControl( {
 	// Therefore a local state is used as a fallback.
 	const isSettingsOpen = advancedSettingsPreference || settingsOpen;
 
-	const isMounting = useRef( true );
+	const isMountingRef = useRef( true );
 	const wrapperNode = useRef();
 	const textInputRef = useRef();
-	const isEndingEditWithFocus = useRef( false );
+	const isEndingEditWithFocusRef = useRef( false );
 
 	const settingsKeys = settings.map( ( { id } ) => id );
 
@@ -219,7 +219,7 @@ function LinkControl( {
 		// We don't auto focus into the Link UI on mount
 		// because otherwise using the keyboard to select text
 		// *within* the link format is not possible.
-		if ( isMounting.current ) {
+		if ( isMountingRef.current ) {
 			return;
 		}
 
@@ -234,16 +234,16 @@ function LinkControl( {
 
 		nextFocusTarget.focus();
 
-		isEndingEditWithFocus.current = false;
+		isEndingEditWithFocusRef.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
 	// The component mounting reference is maintained separately
 	// to correctly reset values in `StrictMode`.
 	useEffect( () => {
-		isMounting.current = false;
+		isMountingRef.current = false;
 
 		return () => {
-			isMounting.current = true;
+			isMountingRef.current = true;
 		};
 	}, [] );
 
@@ -254,7 +254,7 @@ function LinkControl( {
 	 * the next render, if focus was within the wrapper when editing finished.
 	 */
 	const stopEditing = () => {
-		isEndingEditWithFocus.current = !! wrapperNode.current?.contains(
+		isEndingEditWithFocusRef.current = !! wrapperNode.current?.contains(
 			wrapperNode.current.ownerDocument.activeElement
 		);