Fix lint

packages/perseus/src/widgets/interactive-graphs/mafs-graph.test.tsx

@@ -114,15 +114,15 @@ describe("StatefulMafsGraph", () => {
         // Arrange: render a segment graph
         const segmentGraphProps: StatefulMafsGraphProps = {
             ...getBaseStatefulMafsGraphProps(),
-            graph: {type: "segment"}
+            graph: {type: "segment"},
         };
-        const {rerender} = render(<StatefulMafsGraph{...segmentGraphProps} />);
+        const {rerender} = render(<StatefulMafsGraph {...segmentGraphProps} />);
 
         // Act: rerender with a quadratic graph
         const quadraticGraphProps: StatefulMafsGraphProps = {
             ...getBaseStatefulMafsGraphProps(),
-            graph: {type: "quadratic"}
-        }
+            graph: {type: "quadratic"},
+        };
         rerender(<StatefulMafsGraph {...quadraticGraphProps} />);
 
         // Assert: there should be 3 movable points (which define the quadratic
@@ -135,21 +135,21 @@ describe("StatefulMafsGraph", () => {
         // Arrange: render a segment graph with one segment
         const oneSegmentProps: StatefulMafsGraphProps = {
             ...getBaseStatefulMafsGraphProps(),
-            graph: {type: "segment", numSegments: 1}
+            graph: {type: "segment", numSegments: 1},
         };
-        const {rerender} = render(<StatefulMafsGraph{...oneSegmentProps} />);
+        const {rerender} = render(<StatefulMafsGraph {...oneSegmentProps} />);
 
         // Act: rerender with two segments
         const twoSegmentProps: StatefulMafsGraphProps = {
             ...getBaseStatefulMafsGraphProps(),
-            graph: {type: "segment", numSegments: 2}
-        }
+            graph: {type: "segment", numSegments: 2},
+        };
         rerender(<StatefulMafsGraph {...twoSegmentProps} />);
 
         // Assert: there should be 4 movable points. If there are 2 points, it
         // means we are still rendering a single segment.
         expect(screen.getAllByTestId("movable-point").length).toBe(4);
-    })
+    });
 });
 
 function graphToPixel(

packages/perseus/src/widgets/interactive-graphs/mafs-graph.tsx

@@ -1,4 +1,4 @@
-import {View} from "@khanacademy/wonder-blocks-core";
+import {useLatestRef, View} from "@khanacademy/wonder-blocks-core";
 import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
 import {Mafs} from "mafs";
 import * as React from "react";
@@ -33,8 +33,8 @@ import {getGradableGraph, getRadius} from "./reducer/interactive-graph-state";
 import {GraphConfigContext} from "./reducer/use-graph-config";
 
 import type {InteractiveGraphState, InteractiveGraphProps} from "./types";
-import type {Widget} from "../../renderer";
 import type {PerseusGraphType} from "../../perseus-types";
+import type {Widget} from "../../renderer";
 import type {vec} from "mafs";
 
 import "mafs/core.css";
@@ -152,9 +152,10 @@ export const StatefulMafsGraph = React.forwardRef<
     }, [dispatch, xMinRange, xMaxRange, yMinRange, yMaxRange]);
 
     const numSegments = graph.type === "segment" ? graph.numSegments : null;
+    const latestPropsRef = useLatestRef(props);
     useEffect(() => {
-        dispatch(reinitialize(props));
-    }, [graph.type, numSegments]);
+        dispatch(reinitialize(latestPropsRef.current));
+    }, [graph.type, numSegments, latestPropsRef]);
 
     return <MafsGraph {...props} state={state} dispatch={dispatch} />;
 });

packages/perseus/src/widgets/interactive-graphs/reducer/initialize-graph-state.ts

@@ -24,7 +24,7 @@ export type InitializeGraphStateParams = {
     step: [x: number, y: number];
     snapStep: [x: number, y: number];
     graph: PerseusGraphType;
-}
+};
 
 export function initializeGraphState(
     params: InitializeGraphStateParams,

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-action.ts

@@ -1,5 +1,5 @@
+import type {InitializeGraphStateParams} from "./initialize-graph-state";
 import type {Interval, vec} from "mafs";
-import {InitializeGraphStateParams} from "./initialize-graph-state";
 
 export type InteractiveGraphAction =
     | Reinitialize
@@ -21,7 +21,7 @@ export function reinitialize(params: InitializeGraphStateParams): Reinitialize {
     return {
         type: REINITIALIZE,
         params,
-    }
+    };
 }
 
 export const MOVE_CONTROL_POINT = "move-control-point";

packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts

@@ -1,6 +1,5 @@
 import {vector as kvector} from "@khanacademy/kmath";
 import {UnreachableCaseError} from "@khanacademy/wonder-stuff-core";
-import type {Interval} from "mafs";
 import {vec} from "mafs";
 import _ from "underscore";
 
@@ -15,10 +14,10 @@ import {
 } from "../../../util/geometry";
 import GraphUtils from "../../../util/graph-utils";
 import {polar} from "../../../util/graphie";
-import type {QuadraticCoords} from "../graphs/quadratic";
 import {getQuadraticCoefficients} from "../graphs/quadratic";
 import {snap} from "../utils";
 
+import {initializeGraphState} from "./initialize-graph-state";
 import {
     CHANGE_RANGE,
     CHANGE_SNAP_STEP,
@@ -36,12 +35,14 @@ import {
     type MoveControlPoint,
     type MoveLine,
     type MovePoint,
-    type MoveRadiusPoint, Reinitialize,
+    type MoveRadiusPoint,
     REINITIALIZE,
 } from "./interactive-graph-action";
+
+import type {QuadraticCoords} from "../graphs/quadratic";
 import type {InteractiveGraphState, PairOfPoints} from "../types";
 import type {Coord} from "@khanacademy/perseus";
-import {initializeGraphState} from "./initialize-graph-state";
+import type {Interval} from "mafs";
 
 export function interactiveGraphReducer(
     state: InteractiveGraphState,