airjp73
[Bug]: rendering optimization
Which packages are impacted?
- [X]
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
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?
