Memoize field validation results (#10714)

* Memoize field validation results

* Make validation memoization opt-in

Author: t3chguy

package.json

@@ -98,6 +98,7 @@
         "matrix-events-sdk": "0.0.1",
         "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
         "matrix-widget-api": "^1.3.1",
+        "memoize-one": "^5.1.1",
         "minimist": "^1.2.5",
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",

src/components/views/auth/PassphraseField.tsx

@@ -92,6 +92,7 @@ class PassphraseField extends PureComponent<IProps> {
                 },
             },
         ],
+        memoize: true,
     });
 
     public onValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {

src/components/views/directory/NetworkDropdown.tsx

@@ -68,6 +68,7 @@ const validServer = withValidation<undefined, { error?: MatrixError }>({
                     : _t("Can't find this server or its room list"),
         },
     ],
+    memoize: true,
 });
 
 function useSettingsValueWithSetter<T>(

src/components/views/elements/Validation.tsx

@@ -15,8 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode } from "react";
+import React, { ReactChild, ReactNode } from "react";
 import classNames from "classnames";
+import memoizeOne from "memoize-one";
 
 type Data = Pick<IFieldState, "value" | "allowEmpty">;
 
@@ -40,6 +41,7 @@ interface IArgs<T, D = void> {
     description?(this: T, derivedData: D, results: IResult[]): ReactNode;
     hideDescriptionIfValid?: boolean;
     deriveData?(data: Data): Promise<D>;
+    memoize?: boolean;
 }
 
 export interface IFieldState {
@@ -60,7 +62,7 @@ export interface IValidationResult {
  * @param {Function} description
  *     Function that returns a string summary of the kind of value that will
  *     meet the validation rules. Shown at the top of the validation feedback.
- * @param {Boolean} hideDescriptionIfValid
+ * @param {boolean} hideDescriptionIfValid
  *     If true, don't show the description if the validation passes validation.
  * @param {Function} deriveData
  *     Optional function that returns a Promise to an object of generic type D.
@@ -75,6 +77,9 @@ export interface IValidationResult {
  *     - `valid`: Function returning text to show when the rule is valid. Only shown if set.
  *     - `invalid`: Function returning text to show when the rule is invalid. Only shown if set.
  *     - `final`: A Boolean if true states that this rule will only be considered if all rules before it returned valid.
+ * @param {boolean?} memoize
+ *     If true, will use memoization to avoid calling deriveData & rules unless the value or allowEmpty change.
+ *     Be careful to not use this if your validation is not pure and depends on other fields, such as "repeat password".
  * @returns {Function}
  *     A validation function that takes in the current input value and returns
  *     the overall validity and a feedback UI that can be rendered for more detail.
@@ -84,73 +89,87 @@ export default function withValidation<T = void, D = void>({
     hideDescriptionIfValid,
     deriveData,
     rules,
-}: IArgs<T, D>) {
-    return async function onValidate(
+    memoize,
+}: IArgs<T, D>): (fieldState: IFieldState) => Promise<IValidationResult> {
+    let checkRules = async function (
         this: T,
-        { value, focused, allowEmpty = true }: IFieldState,
-    ): Promise<IValidationResult> {
-        if (!value && allowEmpty) {
-            return {};
-        }
-
-        const data = { value, allowEmpty };
-        // We know that if deriveData is set then D will not be undefined
-        const derivedData: D = (await deriveData?.call(this, data)) as D;
-
+        data: Data,
+        derivedData: D,
+    ): Promise<[valid: boolean, results: IResult[]]> {
         const results: IResult[] = [];
         let valid = true;
-        if (rules?.length) {
-            for (const rule of rules) {
-                if (!rule.key || !rule.test) {
-                    continue;
-                }
+        for (const rule of rules) {
+            if (!rule.key || !rule.test) {
+                continue;
+            }
 
-                if (!valid && rule.final) {
-                    continue;
-                }
+            if (!valid && rule.final) {
+                continue;
+            }
+
+            if (rule.skip?.call(this, data, derivedData)) {
+                continue;
+            }
 
-                if (rule.skip?.call(this, data, derivedData)) {
+            // We're setting `this` to whichever component holds the validation
+            // function. That allows rules to access the state of the component.
+            const ruleValid: boolean = await rule.test.call(this, data, derivedData);
+            valid = valid && ruleValid;
+            if (ruleValid && rule.valid) {
+                // If the rule's result is valid and has text to show for
+                // the valid state, show it.
+                const text = rule.valid.call(this, derivedData);
+                if (!text) {
                     continue;
                 }
-
-                // We're setting `this` to whichever component holds the validation
-                // function. That allows rules to access the state of the component.
-                const ruleValid: boolean = await rule.test.call(this, data, derivedData);
-                valid = valid && ruleValid;
-                if (ruleValid && rule.valid) {
-                    // If the rule's result is valid and has text to show for
-                    // the valid state, show it.
-                    const text = rule.valid.call(this, derivedData);
-                    if (!text) {
-                        continue;
-                    }
-                    results.push({
-                        key: rule.key,
-                        valid: true,
-                        text,
-                    });
-                } else if (!ruleValid && rule.invalid) {
-                    // If the rule's result is invalid and has text to show for
-                    // the invalid state, show it.
-                    const text = rule.invalid.call(this, derivedData);
-                    if (!text) {
-                        continue;
-                    }
-                    results.push({
-                        key: rule.key,
-                        valid: false,
-                        text,
-                    });
+                results.push({
+                    key: rule.key,
+                    valid: true,
+                    text,
+                });
+            } else if (!ruleValid && rule.invalid) {
+                // If the rule's result is invalid and has text to show for
+                // the invalid state, show it.
+                const text = rule.invalid.call(this, derivedData);
+                if (!text) {
+                    continue;
                 }
+                results.push({
+                    key: rule.key,
+                    valid: false,
+                    text,
+                });
             }
         }
 
+        return [valid, results];
+    };
+
+    // We have to memoize it in chunks as `focused` can change frequently, but it isn't passed to these methods
+    if (memoize) {
+        if (deriveData) deriveData = memoizeOne(deriveData, isDataEqual);
+        checkRules = memoizeOne(checkRules, isDerivedDataEqual);
+    }
+
+    return async function onValidate(
+        this: T,
+        { value, focused, allowEmpty = true }: IFieldState,
+    ): Promise<IValidationResult> {
+        if (!value && allowEmpty) {
+            return {};
+        }
+
+        const data = { value, allowEmpty };
+        // We know that if deriveData is set then D will not be undefined
+        const derivedData = (await deriveData?.call(this, data)) as D;
+        const [valid, results] = await checkRules.call(this, data, derivedData);
+
         // Hide feedback when not focused
         if (!focused) {
             return { valid };
         }
 
-        let details;
+        let details: ReactNode | undefined;
         if (results && results.length) {
             details = (
                 <ul className="mx_Validation_details">
@@ -170,15 +189,15 @@ export default function withValidation<T = void, D = void>({
             );
         }
 
-        let summary;
+        let summary: ReactNode | undefined;
         if (description && (details || !hideDescriptionIfValid)) {
             // We're setting `this` to whichever component holds the validation
             // function. That allows rules to access the state of the component.
             const content = description.call(this, derivedData, results);
             summary = content ? <div className="mx_Validation_description">{content}</div> : undefined;
         }
 
-        let feedback;
+        let feedback: ReactChild | undefined;
         if (summary || details) {
             feedback = (
                 <div className="mx_Validation">
@@ -194,3 +213,11 @@ export default function withValidation<T = void, D = void>({
         };
     };
 }
+
+function isDataEqual([a]: [Data], [b]: [Data]): boolean {
+    return a.value === b.value && a.allowEmpty === b.allowEmpty;
+}
+
+function isDerivedDataEqual([a1, a2]: [Data, any], [b1, b2]: [Data, any]): boolean {
+    return a2 === b2 && isDataEqual([a1], [b1]);
+}