final-form / final-form/react-final-form
Possible performance regression
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
bug report
### What is the current behavior?
I'm seeing a possible performance regression on my components because the RFF `input` `meta` keys are always changed at field level.
### What is the expected behavior?
`input` and `meta` should be memoized
### Sandbox Link
Here's the component structure:
```
```
And this is my CheckBox component. The useCallback is to guard against the fact that input and meta seem to change on each render pass
```
const CheckBoxField = React.memo(
({
id,
input,
label,
required,
customError,
helperText,
disabled,
meta: { touched, error, submitError, submitFailed },
onChange,
className,
}) => {
const onChangeIt = React.useCallback(e => {
if (disabled) return;
const val = e.target.checked;
input.onChange(val);
input.onBlur();
onChange(val);
}, []);
const theError = error || submitError;
return (
);
},
);
```
Below is the flame graph using the shiny new React Profiler. Notice the `Anonymous (Memo)` which is the `CheckBoxField` component and the `Checkbox (Memo)`, which is the `CheckBoxMat` component, and the fact that it reports (input, meta) changed on each render pass.

### What's your environment?
RFF: 6.3.0
FF: 4.16.1
FFA: 1.1.2
Mac Os
Chrome
Contributor guide
Assessment
This issue has not been assessed yet.