Description
We use React hooks with TypeScript and ran into an issue where we were passing a large enum into the dependency array of the hook function, resulting in TS2590 Expression produces a union type that is too complex to represent
This is an example type signature of a hook
function React.useEffect(effect: React.EffectCallback, deps?: React.DependencyList | undefined): void
Even though the deps type is React.DependencyList
which is type DependencyList = ReadonlyArray<any>;
it appears to be attempting a union deps: (MyEnum1 | MyEnum2 | MyInterface)[]
even though the type is ultimately discarded.
This gives the same error const deps: any[] = [MyEnum1.Key0, MyEnum2.Key0, obj];
We could do [MyEnum1.Key0 as any, MyEnum2.Key0 as any, obj]
but that is not ideal and also breaks the rules of hooks eslint rule.
Another workaround we came up with was [MyEnum1.Key0, MyEnum2.Key0, obj] as const
to avoid the unioning (though this fails the hooks eslint rule which sounds like a separate issue).
Thanks in advance for your help.
TypeScript Version: 4.0.5
Search Terms: react hooks deps, dependency array, union type that is too complex
Code
https://gist.github.com/brieb/ef53a9e48e8a5dec6cfa7d2cfda22623
Expected behavior:
No compiler error
Actual behavior:
TS2590 error: Expression produces a union type that is too complex to represent.
Playground Link:
Related Issues:
#33130