You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
So one thing that I know will help is combining your enums into one.
Otherwise, we don't currently have a good heuristic to avoid triggering the subtype reduction check. I did try the following really naive change to avoid flattening out the entire enum:
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 istype DependencyList = ReadonlyArray<any>;
it appears to be attempting a uniondeps: (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:
Link
Related Issues:
#33130
The text was updated successfully, but these errors were encountered: