remix-validated-form 3.2.1 → 3.2.2

package/browser/ValidatedForm.js

@@ -123,14 +123,24 @@ export function ValidatedForm({ validator, onSubmit, children, fetcher, action,
         validateField: (fieldName) => {
             invariant(formRef.current, "Cannot find reference to form");
             const { error } = validator.validateField(getDataFromForm(formRef.current), fieldName);
+            // By checking and returning `prev` here, we can avoid a re-render
+            // if the validation state is the same.
             if (error) {
-                setFieldErrors((prev) => ({
-                    ...prev,
-                    [fieldName]: error,
-                }));
+                setFieldErrors((prev) => {
+                    if (prev[fieldName] === error)
+                        return prev;
+                    return {
+                        ...prev,
+                        [fieldName]: error,
+                    };
+                });
             }
             else {
-                setFieldErrors((prev) => omit(prev, fieldName));
+                setFieldErrors((prev) => {
+                    if (!(fieldName in prev))
+                        return prev;
+                    return omit(prev, fieldName);
+                });
             }
         },
         registerReceiveFocus: (fieldName, handler) => {

package/build/ValidatedForm.js

@@ -129,14 +129,24 @@ function ValidatedForm({ validator, onSubmit, children, fetcher, action, default
         validateField: (fieldName) => {
             (0, tiny_invariant_1.default)(formRef.current, "Cannot find reference to form");
             const { error } = validator.validateField(getDataFromForm(formRef.current), fieldName);
+            // By checking and returning `prev` here, we can avoid a re-render
+            // if the validation state is the same.
             if (error) {
-                setFieldErrors((prev) => ({
-                    ...prev,
-                    [fieldName]: error,
-                }));
+                setFieldErrors((prev) => {
+                    if (prev[fieldName] === error)
+                        return prev;
+                    return {
+                        ...prev,
+                        [fieldName]: error,
+                    };
+                });
             }
             else {
-                setFieldErrors((prev) => (0, util_1.omit)(prev, fieldName));
+                setFieldErrors((prev) => {
+                    if (!(fieldName in prev))
+                        return prev;
+                    return (0, util_1.omit)(prev, fieldName);
+                });
             }
         },
         registerReceiveFocus: (fieldName, handler) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",

package/src/ValidatedForm.tsx

@@ -229,13 +229,22 @@ export function ValidatedForm<DataType>({
           getDataFromForm(formRef.current),
           fieldName as any
         );
+
+        // By checking and returning `prev` here, we can avoid a re-render
+        // if the validation state is the same.
         if (error) {
-          setFieldErrors((prev) => ({
-            ...prev,
-            [fieldName]: error,
-          }));
+          setFieldErrors((prev) => {
+            if (prev[fieldName] === error) return prev;
+            return {
+              ...prev,
+              [fieldName]: error,
+            };
+          });
         } else {
-          setFieldErrors((prev) => omit(prev, fieldName));
+          setFieldErrors((prev) => {
+            if (!(fieldName in prev)) return prev;
+            return omit(prev, fieldName);
+          });
         }
       },
       registerReceiveFocus: (fieldName, handler) => {