Remove preloadPartialData useEffect

Author: domlander

dotcom-rendering/src/components/SelfHostedVideo.importable.tsx

@@ -177,7 +177,6 @@ export const SelfHostedVideo = ({
 	const [isPlayable, setIsPlayable] = useState(false);
 	const [isMuted, setIsMuted] = useState(true);
 	const [hasAudio, setHasAudio] = useState(true);
-	const [preloadPartialData, setPreloadPartialData] = useState(false);
 	const [showPosterImage, setShowPosterImage] = useState<boolean>(false);
 	const [currentTime, setCurrentTime] = useState(0);
 	const [playerState, setPlayerState] =
@@ -512,15 +511,6 @@ export const SelfHostedVideo = ({
 		}
 	}, [isAutoplayAllowed, isInView, hasBeenInView]);
 
-	/**
-	 * We almost always want to preload some of the video data. If a user has prefers-reduced-motion
-	 * enabled, then the video will only be partially preloaded (metadata + small amount of video)
-	 * when it comes into view.
-	 */
-	useEffect(() => {
-		setPreloadPartialData(isAutoplayAllowed === false || !!isInView);
-	}, [isAutoplayAllowed, isInView]);
-
 	if (adapted) {
 		return FallbackImageComponent;
 	}
@@ -689,6 +679,12 @@ export const SelfHostedVideo = ({
 		? getOptimisedPosterImage(posterImage)
 		: undefined;
 
+	/**
+	 * We almost always want to preload some of the video data. If the video doesn't autoplay (e.g. user has prefers-reduced-motion
+	 * enabled), then the video will only be partially preloaded (metadata + small amount of video) when it comes into view.
+	 */
+	const preloadPartialData = isAutoplayAllowed === false || !!isInView;
+
 	return (
 		<div
 			css={videoContainerStyles(