ESLint: Remove various React Compiler mutation violations (WordPress#…

…66327) Co-authored-by: tyxla <[email protected]> Co-authored-by: Mamaduka <[email protected]>
MaxMood96 · Oct 22, 2024 · 8170442 · 8170442
1 parent d9e7ee7
commit 8170442
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
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 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
@@ -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
@@ -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() {