useTypedController remounts component repeatedly

[susisu]

Hi,

useTypedController only recreates TypedController component when control is changed:

strictly-typed/src/useTypedController.tsx

Line 32 in 3d02e7b

[control],

But actually useForm returns different control object on every render, and TypedController is always recreated.
https://github.com/react-hook-form/react-hook-form/blob/e757653b39645bf9f547525d27f88224d8049539/src/useForm.ts#L1162

This causes the input component to be unmounted and remounted repeatedly, and can impact on both performance and experience.

We are encountering the worst case of it, where the input component triggers rerender of the parent on its initial render using useEffect:

• https://codesandbox.io/s/bold-hypatia-us5fe?file=/src/App.tsx
• cf. https://codesandbox.io/s/charming-wave-qi70l?file=/src/App.tsx

Because TypedController is always "different" component, React remounts the component endlessly with the following warning:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    in TextInput (at App.tsx:23)
    in Controller
    in Unknown (at App.tsx:20)
    in div (at App.tsx:18)
    in App (at src/index.tsx:7)

Thanks.

[bluebill1049]

I think the easiest way is pretty just cache the control, I will try to fix this issue later today 🙏

[bluebill1049]

can you try this beta version: @hookform/strictly-typed@0.0.2-beta.1?

[susisu]

Thank you for looking into it! It looks working for my case.
I have a question about how it works, and added a comment on your PR #7.