final-form / final-form/react-final-form

Possible performance regression

Open
#598 5 comments 0 reactions 0 assignees View on GitHub
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.

Screen Shot 2019-08-20 at 12 59 01

### What's your environment?

RFF: 6.3.0
FF: 4.16.1
FFA: 1.1.2
Mac Os
Chrome

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.