Possible performance regression

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:

<Field
    name={`${name}.enabled`}
    label={i18n._(t('ui.enabled')`Ativado`)}
    component={CheckBox}
/>

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 (
			<CheckBoxMat
				id={id || input.name}
				error={(touched || submitFailed) && (customError || theError)}
				value={input.value}
				onChange={onChangeIt}
				label={label}
				helperText={helperText}
				required={required}
				disabled={disabled}
				className={className}
			/>
		);
	},
);

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

[alancasagrande]

@erikras @mschipperheyn I’ve created a sandbox to demonstrate the issue https://codesandbox.io/s/react-final-form-unexpected-re-render-1hl4r?file=/src/App.js

Even though I use a PureComponent, the last name is re-rendered when I update the first name, because the field props input and meta are never the same.

I know I can use subscription on Form and not listen for values, but I still want to use it for side effects. I would expect last name not to be re-rendered if there is no change, as stated in the docs:

React Final Form’s <Field/> has always, from day one, avoided rerenders when parts of the form state change that don’t affect the field in question. On top of that, React Final Form’s <Field/> provides a subscription prop that allows you to have even more fine-grain control over precisely which form state will cause your field to rerender.

https://final-form.org/docs/react-final-form/migration/formik

Using subscription={{}} on Field does not seem to have any effect on that.

Am I missing something?

[mschipperheyn]

Turns out my key problem was onChange validation. It lead to all my fields input and meta values from updating. Yup is async and that is also a bottleneck. @erikras that (async?) onChange validation leads to all input and meta being changes seems wrong to me. Bug? I have { valid: true } as a form level subscription. Perhaps that’s the reason? Super tricky to understand why things are re-rendering.