From f5fb9f8a9ac655eaf703a0cd006ab8f47e94b7c0 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 20 Nov 2024 12:14:33 +0400
Subject: [PATCH] Global Styles: Don't call store actions during the render

---
 .../src/components/global-styles/screen-style-variations.js  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
index 12690966ba3c4..76d13023ff09a 100644
--- a/packages/edit-site/src/components/global-styles/screen-style-variations.js
+++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useDispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,7 +23,9 @@ function ScreenStyleVariations() {
 	// - "Desktop" device preview
 	const { setDeviceType } = useDispatch( editorStore );
 	useZoomOut();
-	setDeviceType( 'desktop' );
+	useEffect( () => {
+		setDeviceType( 'desktop' );
+	}, [ setDeviceType ] );
 
 	return (
 		<>