From 81704424da4a17d22e9fcee2a5fe2fc93c8382a1 Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Tue, 22 Oct 2024 17:46:06 +0300
Subject: [PATCH] ESLint: Remove various React Compiler mutation violations
 (#66327)

Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 packages/block-editor/src/components/iframe/index.js |  8 ++++----
 packages/components/src/composite/legacy/index.tsx   |  7 +++++--
 .../src/components/dataviews-bulk-actions/index.tsx  | 12 ++++++------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index a69d8db29e07d..9fc9fd4be64bd 100644
--- 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 initialContainerWidth = useRef( 0 );
+	const initialContainerWidthRef = useRef( 0 );
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -243,12 +243,12 @@ function Iframe( {
 
 	useEffect( () => {
 		if ( ! isZoomedOut ) {
-			initialContainerWidth.current = containerWidth;
+			initialContainerWidthRef.current = containerWidth;
 		}
 	}, [ containerWidth, isZoomedOut ] );
 
 	const scaleContainerWidth = Math.max(
-		initialContainerWidth.current,
+		initialContainerWidthRef.current,
 		containerWidth
 	);
 
@@ -345,7 +345,7 @@ function Iframe( {
 
 		const maxWidth = 750;
 		// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
-		// initialContainerWidth will be smaller than the full page, and reflow will happen
+		// initialContainerWidthRef will be smaller than the full page, and reflow will happen
 		// when the canvas area becomes larger due to sidebars closing. This is a known but
 		// minor divergence for now.
 
diff --git a/packages/components/src/composite/legacy/index.tsx b/packages/components/src/composite/legacy/index.tsx
index 22ddff6572dd0..c6e6616e96c04 100644
--- a/packages/components/src/composite/legacy/index.tsx
+++ b/packages/components/src/composite/legacy/index.tsx
@@ -151,8 +151,11 @@ function proxyComposite< C extends Component >(
 
 		const { store, ...rest } =
 			mapLegacyStatePropsToComponentProps( legacyProps );
-		const props = rest as ComponentProps< C >;
-		props.id = useInstanceId( store, props.baseId, props.id );
+		let props = rest as ComponentProps< C >;
+		props = {
+			...props,
+			id: useInstanceId( store, props.baseId, props.id ),
+		};
 
 		Object.entries( propMap ).forEach( ( [ from, to ] ) => {
 			if ( props.hasOwnProperty( from ) ) {
diff --git a/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
index 5eb9c5e1b6a4d..92a3fe85f67e7 100644
--- a/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
+++ b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
@@ -269,7 +269,7 @@ function FooterContent< Item >( {
 	const [ actionInProgress, setActionInProgress ] = useState< string | null >(
 		null
 	);
-	const footerContent = useRef< JSX.Element | null >( null );
+	const footerContentRef = useRef< JSX.Element | null >( null );
 
 	const bulkActions = useMemo(
 		() => actions.filter( ( action ) => action.supportsBulk ),
@@ -306,8 +306,8 @@ function FooterContent< Item >( {
 		[ actions, selectedItems ]
 	);
 	if ( ! actionInProgress ) {
-		if ( footerContent.current ) {
-			footerContent.current = null;
+		if ( footerContentRef.current ) {
+			footerContentRef.current = null;
 		}
 		return renderFooterContent(
 			data,
@@ -320,8 +320,8 @@ function FooterContent< Item >( {
 			setActionInProgress,
 			onChangeSelection
 		);
-	} else if ( ! footerContent.current ) {
-		footerContent.current = renderFooterContent(
+	} else if ( ! footerContentRef.current ) {
+		footerContentRef.current = renderFooterContent(
 			data,
 			actions,
 			getItemId,
@@ -333,7 +333,7 @@ function FooterContent< Item >( {
 			onChangeSelection
 		);
 	}
-	return footerContent.current;
+	return footerContentRef.current;
 }
 
 export function BulkActionsFooter() {