[Bug]: rendering optimization

[mschipperheyn]

Which packages are impacted?

• remix-validated-form
• @remix-validated-form/with-zod
• @remix-validated-form/with-yup
• zod-form-data

What version of these packages are you using?

• remive-validated-form: 5.1.5

Please provide a link to a minimal reproduction of the issue.

I'm taking the time to review the issue and write this up.

Steps to Reproduce the Bug or Issue

None of the callback functions used in the app, but in particular onChange and onBlur support useCallback. From what I can tell this leads to a lot of unnecessarily deep rerenders of components.

To reproduce, Install the React profiler and start editing a form. You will see that the cause of rerenders is listed as onChange and onBlur

But the code already suggests this clearly

onChange: (...args: unknown[]) => {
        if (behavior === "onChange") validate();
        else clearError();
        return props?.onChange?.(...args);
      },
      onBlur: (...args: unknown[]) => {
        if (behavior === "onBlur") validate();
        setTouched(true);
        return props?.onBlur?.(...args);
      },

Expected behavior

This could should be supported by useCallback to ensure that passing a new callback and blur identity to a child component does not force a rerender each and every time.

Screenshots or Videos

No response

Platform

• OS: mac os
• Browser: Chrime

Additional context

No response

[patrickpissurno]

Any updates on this?

[airjp73]

Hi!

It isn't clear from the issue description what needs to be fixed. The referenced code is inside createGetInputProps which already gets memoized where it's used.

In order to help, I'm going to need a more detailed reproduction of the issue. In what specific situation are you observing more renders than there should be?