diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index 434a35ba6d2bdb..273c982e746b52 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -7,7 +7,14 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { memo, useMemo, useEffect, useId, useState } from '@wordpress/element';
+import {
+	memo,
+	useMemo,
+	useEffect,
+	useLayoutEffect,
+	useId,
+	useState,
+} from '@wordpress/element';
 import { useDispatch, useRegistry } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
@@ -614,7 +621,7 @@ function BlockProps( {
 		} );
 	// Setting state after every render is fine because this component is
 	// pure and will only re-render when needed props change.
-	useEffect( () => {
+	useLayoutEffect( () => {
 		// We could shallow compare the props, but since this component only
 		// changes when needed attributes change, the benefit is probably small.
 		setWrapperProps( wrapperProps );