issue: isValid changes from false to true on first render when react strictMode enabled

[AlexanderKositsyn]

Version Number

7.40.0

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-v7-controller-ts-forked-8ikori?file=/src/index.tsx

Steps to reproduce

1. Go to console
2. See isValid changes from false to true

Expected behaviour

isValid is false, because input is required

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[AlexanderKositsyn]

The same on latest version (7.41.5)
LInk https://codesandbox.io/s/react-hook-form-v7-controller-ts-forked-8ikori?file=/package.json:391-397

[Moshyfawn]

formState is initiated with isValid: false by default (we can't know the "correct" value until both the hook and the components are rendered in that order). As you're using a field level validation (Controller rules), form needs to "evaluate" the inputs in the form and their "rules" and set the correct isValid value on next re-render

[AlexanderKositsyn]

You can remove React.StrictMode component and isValid stays false
https://codesandbox.io/s/react-hook-form-v7-controller-ts-forked-8ikori?file=/src/index.tsx

[AlexanderKositsyn]

@Moshyfawn is isValid changing from false to true expected behaviour?

[Moshyfawn]

@Moshyfawn is isValid changing from false to true expected behaviour?

My bad, I read the true & false values wrong. Let's see..

[Moshyfawn]

@bluebill1049 it seems like whatever is causing it is fixed in origin/master and was related to this executeBuiltInValidation call.

You can checkout this codespace: navigate to Basic onChange test and see that isValid is false

[bluebill1049]

thanks a lot @Moshyfawn I will release the minor update today.

[AlexanderKositsyn]

@bluebill1049
Not fixed in 7.42.0
https://codesandbox.io/s/react-hook-form-v7-controller-ts-forked-8ikori?file=/src/index.tsx

[leapful]

@bluebill1049

It seems the root cause is from line 97 in useController.ts when useEffect hook performs clean up callback twice in React.StrictMode that causes setting flag mount to false.

react-hook-form/src/useController.ts

Lines 76 to 99 in 4b4f1d8

	React.useEffect(() => {
	const updateMounted = (name: InternalFieldName, value: boolean) => {
	const field: Field = get(control._fields, name);
	if (field) {
	field._f.mount = value;
	}
	};
	updateMounted(name, true);
	return () => {
	const _shouldUnregisterField =
	control._options.shouldUnregister || shouldUnregister;
	(
	isArrayField
	? _shouldUnregisterField && !control._stateFlags.action
	: _shouldUnregisterField
	)
	? control.unregister(name)
	: updateMounted(name, false);
	};
	}, [name, control, isArrayField, shouldUnregister]);

With mount=false, validation will be stopped and always return valid state.

react-hook-form/src/logic/validateField.ts

Lines 54 to 55 in 4b4f1d8

	if (!mount || disabled) {
	return {};

[bluebill1049]

yes @leapful you are right. I get deep-fried by this useEffect twice in strict mode. Try to figure out a solution to this.

[bluebill1049]

thanks, @leapful for your help! Finally, figure out a solution for this.

[AlexanderKositsyn]

@bluebill1049 Thanks!
When it will be released?