Memo the sampling of functions

packages/components/src/components/FunctionChart.tsx

@@ -76,28 +76,32 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
     chartSettings.count
   );
   type point = { x: number; value: result<Distribution, string> };
-  let valueData: point[] = data1.map((x) => {
+  let valueData: point[] = React.useMemo(
-    let result = runForeign(fn, [x], environment);
+    () =>
-    if (result.tag === "Ok") {
+      data1.map((x) => {
-      if (result.value.tag == "distribution") {
+        let result = runForeign(fn, [x], environment);
-        return { x, value: { tag: "Ok", value: result.value.value } };
+        if (result.tag === "Ok") {
-      } else {
+          if (result.value.tag == "distribution") {
-        return {
+            return { x, value: { tag: "Ok", value: result.value.value } };
-          x,
+          } else {
-          value: {
+            return {
-            tag: "Error",
+              x,
-            value:
+              value: {
-              "Cannot currently render functions that don't return distributions",
+                tag: "Error",
-          },
+                value:
-        };
+                  "Cannot currently render functions that don't return distributions",
-      }
+              },
-    } else {
+            };
-      return {
+          }
-        x,
+        } else {
-        value: { tag: "Error", value: errorValueToString(result.value) },
+          return {
-      };
+            x,
-    }
+            value: { tag: "Error", value: errorValueToString(result.value) },
-  });
+          };
+        }
+      }),
+    [environment, fn]
+  );
 
   let initialPartition: [
     { x: number; value: Distribution }[],