only update state if needed

Author: oliverabrahams

dotcom-rendering/src/components/ScrollableCarousel.tsx

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import type { Breakpoint } from '@guardian/source/foundations';
 import { from, space, until } from '@guardian/source/foundations';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { nestedOphanComponents } from '../lib/ophan-helpers';
 import { palette } from '../palette';
 import { CarouselCount } from './CarouselCount';
@@ -358,7 +358,7 @@ export const ScrollableCarousel = ({
 	 * updates the state of cardCount. we use the half of a card because at
 	 * this scroll amount the carousel will snap to that card.
 	 */
-	const updateCardCountOnScroll = () => {
+	const updateCardCountOnScroll = useCallback(() => {
 		const carouselElement = carouselRef.current;
 		if (!carouselElement) return;
 		const cardWidth = carouselElement.querySelector('li')?.offsetWidth ?? 0;
@@ -368,7 +368,7 @@ export const ScrollableCarousel = ({
 		if (count !== cardCount) {
 			setCardCount(count);
 		}
-	};
+	}, [cardCount]);
 
 	/**
 	 * Throttle scroll events to optimise performance. As we're only using this
@@ -474,7 +474,7 @@ export const ScrollableCarousel = ({
 				throttleEvent(updateCardCountOnScroll),
 			);
 		};
-	}, [isArticle]);
+	}, [isArticle, updateCardCountOnScroll]);
 
 	return (
 		<div css={[baseContainerStyles, !isArticle && frontContainerStyles]}>