React - useEffect 中的渲染滞后 UI

Question

I'm trying to think of a better way to do my onChange validation for my form but it's really laggy because of the multiple rerenders.

This is my useEffect code:

useEffect(() => {
        if (passwordValues.password) {
            setValidPassword({ confirmPassword: validateConfirmPassword(correctPassword), password: validatePassword(correctPassword) })
        }
        if(formData.name){
            setValidFormData(validFormData => ({...validFormData, name: validateData(correctFormData, "name")}))
        }
        
        if(formData.lastName){
            setValidFormData(validFormData => ({...validFormData, lastName: validateData(correctFormData, "lastName")}))
        }
        if(formData.email){
            setValidFormData(validFormData => ({...validFormData, email: validateData(correctFormData, "email")}))
        }
        if(formData.phone){
            setValidFormData(validFormData => ({...validFormData, phone: validateData(correctFormData, "phone")}))
        }
    }, [passwordValues, correctPassword, correctFormData, formData])

I know I can maybe do that in just a couple lines but is that what is doing so many rerenders?

My formData, passwordValues, correctPassword and correctFormData change on every input change.

-- EDIT --

I removed most of the dependencies in the array and I just stayed with [formData], improves the speed, but still quite a bit laggy.

Answer 1

I am writing it here, because it will be a bit long explanation, not suitable for comments.

These scenarios are pretty common in any application, where you have to react to changes in values and to tackle this I just created one special hook, use-effect-x (Writing tests is pending)

This custom hook will tell you the changed item set, which can be very useful here. Below is the code, that I was able to write based on your inputs. you can make use of useEffectX as a replacement of useEffect everywhere. This way non-needed setValidFormData will not run. Give it a try and let me know.

import { useEffectX } from "use-effect-x";
useEffectX(
  ({
    changedItem: [
      changeObjConfirmPassword,
      changeObjPassword,
      changeObjName,
      changeObjLastname,
      changeObjEmail,
      changeObjPhone,
    ],
  }) => {
    if (changeObjConfirmPassword.changed) {
      setValidPassword({
        confirmPassword: validateConfirmPassword(confirmPassword),
      });
    }

    if (changeObjPassword.changed) {
      setValidPassword({
        password: validatePassword(correctPassword),
      });
    }

    if (changeObjName.changed) {
      setValidFormData((validFormData) => ({
        ...validFormData,
        name: validateData(correctFormData, "name"),
      }));
    }

    if (changeObjLastname.changed) {
      setValidFormData((validFormData) => ({
        ...validFormData,
        lastName: validateData(correctFormData, "lastName"),
      }));
    }
    if (changeObjEmail.changedd) {
      setValidFormData((validFormData) => ({
        ...validFormData,
        email: validateData(correctFormData, "email"),
      }));
    }
    if (changeObjPhone.changed) {
      setValidFormData((validFormData) => ({
        ...validFormData,
        phone: validateData(correctFormData, "phone"),
      }));
    }
  },
  [confirmPassword, password, name, lastName, email, phone]
);


   

Thanks and let me know, if this is not the suggestion you were expecting, I will move it.