Using the useState Hook in Next.js and TypeScript

One of the best parts of building with React and its subset frameworks is the hooks you use and the most used Hook is the useState Hook. P.S a good understanding of Next.js and hooks is helpful here.

If you’re integrating TypeScript into your Next.js web app, it's only best to do it the right way.

Initialization:

const [name, setName] = useState<string>('John Doe')

Notice the key difference as compared to a normal js file? When creating a state, you must also specify the data type that will also be stored within that state. Why?
Short Answer: This saves us from logical errors when trying to update and use that state and its value.

For instance, if you tried to put a number within the parentheses of that state when calling the setName function. You would receive an error that reads something like this:
The argument of type ‘number’ is not assignable to the parameter of type ‘string | (() => string)

So, what if we have multiple data types to be stored in one state container? For instance, if we intended to store a person’s name, age, and status that is a string, number, and boolean respectively.

The smoothest way to achieve this is to define a type object with those types listed and then you use that to initialize your state, as seen below.

A type of object would look something like this:

type UserData = {
  name: string,
  age: number,
  status: boolean
}

Using the type object to initialize a new state:

type UserData = {
  name: string,
  age: number,
  status: boolean
}
// New State
const [user, setUser] = useState<UserData>({name: 'John Doe'})

However, when you do it like this you will run into an error of this nature:

Type ‘{ name: string; }’ is missing the following properties from type ‘UserData’: age, status

The issue is in the last part of that error note states that we can not ignore the other variables while we only initialize the name and its value, so the solution would look like this:

type UserData = {
  name: string,
  age: number,
  status: boolean
}
// New State
const [user, setUser]=useState<UserData>({name: 'Johnn Doe', age: 12, status: true})

But what if we don’t have dummy data, to begin with, and we want to return an empty object in the case of the state not being updated instead of placeholders?

Solution: In our type object we simply add question marks after the variable names

type UserData = {
  name?: string,
  age?: number,
  status?: boolean
}
// New State
const [user, setUser]=useState<UserData>({age: 12})

Notice the question marks? This tells the typescript that the variable is not required every time the state is manipulated.

For updating the state, I’ll cover that in the article for handling forms.

Tip: Any other data types passed into those states will of course result in an error.