When using Reactâs useState Hook in TypeScript, the method usually infers the implicit type for the returned state from the provided argument automatically. In the following example, Reactâs useState Hook in a function component knows that it deals with a number type. Hence the returned state (here: count ) has the type number in addition to the state updater function (here: setCount ) which takes a value of type number as argument:
However, when working with other types than primitives (e.g. complex types for objects, nullish types, union types), inferring the type automatically does not always work. Then you can use type arguments with TypeScript with which you can tell Reactâs useState Hookâs generic type explicitly about the type. I like to use this as a best practice anyway, because it makes the code self-descriptive:
If the type argument becomes something else than a primitive, extract it as TypeScript interface:
Thatâs it. Mostly you can rely on TypeScriptâs ability to automatically infer the type. However, sometimes you need to use type arguments from TypeScript to help the TS compiler out. If you want to have self-descriptive code, you can use type arguments anyway.