react-hook-form: V7 Bug - Typescript performance issue on Field Array
Describe the bug
If
- A custom type is created to represent form values
- The type is of a certain structure
- The type is used as a generic in
useForm,
then typescript compilation will slow down tremendously.
In larger apps with many useForms that take this generic, Node can run out of heap memory even with 8gb of allocated heap. I’ve created a code sandbox, but unfortunately, the issue can not really be observed there since we cannot track typescript compilation time (at least to my knowledge). Therefore, I’ve created a very simple sample project to show the issue.
To Reproduce Steps to reproduce the behavior:
- Download the sample project.
- Run npm/yarn install
- Run npm/yarn start
- Observe the extremely long time it takes for typescript to compute results via react-scripts latest version
Codesandbox link (Required) Use this memory-issues.zip
might not help but included regardless. https://codesandbox.io/s/summer-sunset-b2wwn?file=/src/App.tsx
Desktop (please complete the following information):
- OS: Ubuntu 20.04 LTS
Additional Context I copied over my types exactly. The issue is focused around using an object in a triple nested array. So line 51 in types.ts. If you remove the custom select type here and just use null, then the issue is improved exponentially.
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 42 (42 by maintainers)
Commits related to this issue
- close #4237 improve ts perf — committed to react-hook-form/react-hook-form by bluebill1049 3 years ago
- close #4237 improve ts perf (#4238) * close #4237 improve ts perf * 7.0.0-beta.9 — committed to react-hook-form/react-hook-form by bluebill1049 3 years ago
- #4237 Improve type checking performance by switching to template literal of primitive type for ArrayKey (#4248) Co-authored-by: An Tran <an.tran@wizeline.com> — committed to react-hook-form/react-hook-form by leapful 3 years ago
- 7️⃣ V7 (#3741) * use useFormState with useController internally and new isValidating state(#3778) * use useFormState with useController internally * remove console.log * V7 Register (WIP) (#... — committed to react-hook-form/react-hook-form by bluebill1049 3 years ago
@wdfinch
The old one allows any child item which is an array in a nested object might have length “0” -> “99” while the new one allows “0” -> “49” of length.
@bluebill1049
I’ve changed the type definition in line 66 of types/utils.ts
https://github.com/react-hook-form/react-hook-form/blob/v7/src/types/utils.ts#L60-L66
It was:
I’ve tested OK without any performance issue on new sample of @wdfinch
@bluebill1049
Since Typescript 4.1 allows to use template literal type by using primitive type, can we use:
instead of
Do you see any issue if we switch into this one ?
Sounds good. Hopefully, it can be done. I appreciate you helping me with this issue.
@wdfinch feel free to take a look at our ts definition: https://github.com/react-hook-form/react-hook-form/tree/v7/src/types see if anything you can pick up for the improvement.