diff --git a/packages/server-side-render/src/server-side-render.js b/packages/server-side-render/src/server-side-render.js
index 162501737886ac..9fe2b47d7a2484 100644
--- a/packages/server-side-render/src/server-side-render.js
+++ b/packages/server-side-render/src/server-side-render.js
@@ -11,6 +11,7 @@ import {
 	RawHTML,
 	useCallback,
 	useEffect,
+	useLayoutEffect,
 	useRef,
 	useState,
 } from '@wordpress/element';
@@ -106,7 +107,10 @@ export default function ServerSideRender( props ) {
 	const prevProps = usePrevious( props );
 	const [ isLoading, setIsLoading ] = useState( false );
 	const latestPropsRef = useRef( props );
-	latestPropsRef.current = props;
+
+	useLayoutEffect( () => {
+		latestPropsRef.current = props;
+	}, [ props ] );
 
 	const fetchData = useCallback( () => {
 		if ( ! isMountedRef.current ) {