useEffect fire after native input mount?

[bluebill1049]

Hi guys,

I have started testing with React 18 alpha, so far looking pretty good. However, I have few automation tests that failed, I was investigating the root cause and realize useEffect is called after native input is rendered?

The automation script

cy.visit('http://localhost:3000/basic/onBlur');

cy.get('input[name="nestItem.nest1"]').focus();
cy.get('input[name="nestItem.nest1"]').blur();
cy.get('input[name="nestItem.nest1"] + p').contains('nest 1 error'); // failed here

[rickhanlonii]

@bluebill1049 we have changed some things related to effect timing, but it's hard to say what it causing this without a full example.

Do you have something I can test out?

[bluebill1049]

Thanks, @rickhanlonii for the follow-up.

Please follow the following steps:

• checkout this branch https://github.com/react-hook-form/react-hook-form/tree/react-18
• yarn && yarn start:app
• yarn cypress:open

and run the basic.ts and open the console. you will find the console.log get printed and relevant code stay here:

https://github.com/react-hook-form/react-hook-form/blob/react-18/src/useForm.ts#L629
https://github.com/react-hook-form/react-hook-form/blob/react-18/src/useForm.ts#L1141

[bluebill1049]

I have switched to the createRoot instead of legacy mode and the issue has been resolved and all cypress testings pass. In addition, integration tests indicated with much fewer re-render thanks to batch state updates.