Using "setValue" from react-hook-form created 358 000 types typescript diagnostics

Question

So I've frequently used react-hook-forms and setValue in plenty of places throughout my application without any issues.

Then in a newly created branch based on main, where I barely made any changes at all I ran into this issue while compiling (I tried to up the ram-limit, but did not help. Always reached like 5.5GB and then throwing error)

Issues checking service aborted - probably out of memory. Check the memoryLimit option in the ForkTsCheckerWebpackPlugin configuration.
If increasing the memory doesn't solve the issue, it's most probably a bug in the TypeScript or EsLint.

I noticed that this issue disappeared when I removed one line of code:

  setValue(`category.${categoryIndex}.Products`, [...rows, newRow]

So I ran npx tsc --diagnostics --listFiles before and after adding this line of code. The number of types increased by 358 732. How is this possible? What is considered as a type and how are these calculated?

The setValue in this context was quite nested, if that does any difference. I had X number of tabs, depending on the number of "categories" collected by backend. And each category had a list of products displayed in a mui-datagrid. So if backend fetches 20 categories we got 20 tabs and each tab had one datagrid. Inside of this datagrid component I used the setValue shown above which caused alot of types being created.

Answer 1

Our team ran into a similar issue with react-hook-form when trying to call setValue().

The root cause for us was that the field that we were trying to set the value for had a typo in the name attribute.

If there is a typo in the field's name, or if it is missing the name attribute altogether, then TS will get super confused and use a ton of memory.

Following instructions from this article helped us to create a TS trace and analyze its results to diagnose the issue.