From 93fd8054ed02fa4ff323c913e37fdfc58c825cea Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 11 Oct 2021 17:42:41 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Memoize=20optionComponents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/forms/FormMultiselect.tsx | 7 ++++++-
 src/components/forms/FormSelect.tsx      | 8 +++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/forms/FormMultiselect.tsx b/src/components/forms/FormMultiselect.tsx
index 5279776..5dfd283 100644
--- a/src/components/forms/FormMultiselect.tsx
+++ b/src/components/forms/FormMultiselect.tsx
@@ -34,12 +34,17 @@ export function FormMultiselect({label, validity, pairProps, labelProps, onSimpl
         [onSimpleChange, options]
     )
 
+    const optionComponents = React.useMemo(
+        () => Object.keys(options).map(key => <Multiselect.Option value={key} key={key}/>),
+        [options],
+    )
+
     return (
         <FormPair
             label={<FormLabel {...labelProps}>{label}</FormLabel>}
             input={
                 <Multiselect onSimpleChange={onSimpleChangeWrapped} {...props}>
-                    {Object.keys(options).map(key => <Multiselect.Option value={key} key={key}/>)}
+                    {optionComponents}
                 </Multiselect>
             }
             validity={validity}
diff --git a/src/components/forms/FormSelect.tsx b/src/components/forms/FormSelect.tsx
index 9771935..3da509e 100644
--- a/src/components/forms/FormSelect.tsx
+++ b/src/components/forms/FormSelect.tsx
@@ -3,6 +3,7 @@ import * as ReactDOM from "react-dom"
 import * as Types from "../../types"
 import {BaseElement} from "../BaseElement"
 import mergeClassNames from "classnames"
+import {Multiselect} from "../inputs/Multiselect"
 import {FormPair, FormPairProps} from "./FormPair";
 import {FormLabel, FormLabelProps} from "./FormLabel";
 import {Select, SelectProps} from "../inputs/Select";
@@ -33,12 +34,17 @@ export function FormSelect({label, validity, options, pairProps, labelProps, onS
         [onSimpleChange, options]
     )
 
+    const optionComponents = React.useMemo(
+        () => Object.keys(options).map(key => <Select.Option value={key} key={key}/>),
+        [options],
+    )
+
     return (
         <FormPair
             label={<FormLabel {...labelProps}>{label}</FormLabel>}
             input={
                 <Select onSimpleChange={onSimpleChangeWrapped} {...props}>
-                    {Object.keys(options).map(key => <Select.Option value={key} key={key}/>)}
+                    {optionComponents}
                 </Select>
             }
             validity={validity}