Learn how to get the most out of useState by using TypeScript for autocompletion and error catching

I feel like TypeScript really unlocks the potential of React Hooks. Using TypeScript with React Hooks just feels right. It unlocks highly accurate autocompletion as well as the ability to catch errors before they happen. We are about to learn what a perfect match React Hooks and TypeScript are for each other via some examples.

Let’s Get Started

Before we get into these examples I would like to go into some more detail about how the useState hook works with TypeScript (the ins and outs of it so to speak).

TypeScript will always try to infer types of variables, which is really good news for us. Basically what this means is that often times we can use the useState hook in the identical way that it would be used in JavaScript. Where things change is when there is potential for there to be multiple types. For example, if there was a variable that could be either _undefined _or a s_tring. _In this scenario, TypeScript is going to need a little help. This is where TypeScript generics come into play and this is the crux of using the useState hook with TypeScript.

#react-hook #react #javascript #typescript