[Image] | (fix) | Batch setState calls in setupGraphie to prevent infinite loop

.changeset/early-buttons-pay.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Fix image bug by batching setState calls in setupGraphie

packages/perseus/src/components/svg-image.tsx

@@ -289,6 +289,7 @@ class SvgImage extends React.Component<Props, State> {
         graphie: any,
         options: any,
     ) => {
+        const newLabelsRendered: LabelsRenderedMap = {};
         _.map(options.labels, (labelData) => {
             const {JIPT} = getDependencies();
             if (JIPT.useJIPT && this.state.labelDataIsLocalized) {
@@ -357,13 +358,17 @@ class SvgImage extends React.Component<Props, State> {
                     label.css(styleName, styleValue);
                 });
             }
-            this.setState({
-                labelsRendered: {
-                    ...this.state.labelsRendered,
-                    [labelData.content]: true,
-                },
-            });
+            newLabelsRendered[labelData.content] = true;
         });
+        // Note: Using a function is the preferred method of combining previous
+        // state with the new update
+        // (docs: https://react.dev/reference/react/Component#setstate-parameters)
+        this.setState((prev) => ({
+            labelsRendered: {
+                ...prev.labelsRendered,
+                ...newLabelsRendered,
+            },
+        }));
     };
 
     // Try to parse a CSS value as pixels. Returns null if the parameter string