diff --git a/packages/math-input/src/components/keypad-context.tsx b/packages/math-input/src/components/keypad-context.tsx index 28519d5a33..c3233739fa 100644 --- a/packages/math-input/src/components/keypad-context.tsx +++ b/packages/math-input/src/components/keypad-context.tsx @@ -8,7 +8,7 @@ * - Perseus Renderers (Server/Item/Article) */ import * as React from "react"; -import {useState} from "react"; +import {useState, useMemo} from "react"; import type {KeypadAPI, KeypadContextType} from "../types"; import type {KeypadContextRendererInterface} from "@khanacademy/perseus-core"; @@ -39,22 +39,31 @@ export function StatefulKeypadContextProvider(props: Props) { const [scrollableElement, setScrollableElement] = useState(); + const memoizedValue = useMemo( + () => ({ + keypadActive, + setKeypadActive, + keypadElement, + setKeypadElement, + renderer, + setRenderer, + scrollableElement, + setScrollableElement, + }), + [ + keypadActive, + setKeypadActive, + keypadElement, + setKeypadElement, + renderer, + setRenderer, + scrollableElement, + setScrollableElement, + ], + ); + return ( - + {props.children} );