From 13fa2a36095efd809acbbe57d64b518afb4b4829 Mon Sep 17 00:00:00 2001
From: Matthew Curtis <matthewcurtis@khanacademy.org>
Date: Fri, 13 Oct 2023 13:41:12 -0500
Subject: [PATCH] add useMemo to KeypadContext provider

---
 .../src/components/keypad-context.tsx         | 41 +++++++++++--------
 1 file changed, 25 insertions(+), 16 deletions(-)

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<HTMLElement | null>();
 
+    const memoizedValue = useMemo(
+        () => ({
+            keypadActive,
+            setKeypadActive,
+            keypadElement,
+            setKeypadElement,
+            renderer,
+            setRenderer,
+            scrollableElement,
+            setScrollableElement,
+        }),
+        [
+            keypadActive,
+            setKeypadActive,
+            keypadElement,
+            setKeypadElement,
+            renderer,
+            setRenderer,
+            scrollableElement,
+            setScrollableElement,
+        ],
+    );
+
     return (
-        <KeypadContext.Provider
-            value={{
-                setKeypadActive,
-                keypadActive,
-                setKeypadElement,
-                keypadElement,
-                setRenderer,
-                renderer,
-                // The scrollableElement options can likely be removed after
-                // the exercises-package is officially deprecated. They don't appear
-                // to be used anywhere except for the exercises-package and tests.
-                setScrollableElement,
-                scrollableElement,
-            }}
-        >
+        <KeypadContext.Provider value={memoizedValue}>
             {props.children}
         </KeypadContext.Provider>
     );