Avoid unexpected behavior of React’s useState

No argument, no type argument

const [undefinedThing, setUndefinedThing] = useState()

const [undefinedThing, setUndefinedThing] = useState()

The problem with this code is that when you don't set the type argument and you don't pass anything in, the thing you create will be undefined. What this means is that you won't ever to be able to set undefinedThing to anything at all.

No argument, type argument

const [stringThing, setStringThing] = useState<string>()

const [stringThing, setStringThing] = useState<string>()

The type for this will actually be set as either string or undefined since the argument is undefined. This does have some valid use-cases.

Argument, no type argument

const [emptyArray, setEmptyArray] = useState([])

const [emptyArray, setEmptyArray] = useState([])

When you pass an argument, but don't set a type argument, you might run into the problem of the type being set incorrectly. It does work, and if you pass something like a string it will behave as expected.

But, if you pass an empty array as the initial state, it's going to set the type to be an array of never. So you won't ever be able to add anything to your array.

Argument, type argument

const [arrayOfIds, setArrayOfIds] = useState<{ id: string }[]>([])

const [arrayOfIds, setArrayOfIds] = useState<{ id: string }[]>([])

And here I have a proper instance of useState with an initial argument and a type argument set.

You will want to do this when you are passing empty objects and arrays as the initial state.

Transcript

Let's talk about useState, because useState in react has some interesting behaviors depending on what you pass it, and there's four configurations.

If you pass useState nothing and you don't pass a type argument either, then the thing that it creates will be undefined. You can't set anything else to it. You can say setUndefinedThing as 123 or something. This actually will work surprisingly, but it's not going to do what you want it to do. This thing is always going to be undefined.

If you don't pass it an argument but you do pass it a type argument, then this is going to be typed as string or undefined, because technically the thing that you've passed in here is undefined. If you pass it in here, then it's not going to work. If you don't pass anything it will be string or undefined, which is useful for a lot of cases.

If you pass it just an argument but with no type argument then it might infer it incorrectly. If you pass it like a string, if you say this, this, this whatever, then it will infer correctly because it's time to string and that's the thing you passed in. Whereas if you pass in just emptyArray, it's not going to have fun.

If you try to set anything to it, so setEmptyArray like with an array of id '123', this is first of all going to error because it's not assignable to type 'never' because this array should never contain anything according to your types. You're still going to get never array for it.

With arrays especially, or objects, or things that don't contain anything yet, you need to pass in a type argument and a real argument. This means that then arrayOfIds is typed as array string, and you can set the arrayOfIds properly.

React's useState can behave in slightly unexpected ways in TypeScript - sometimes giving you 'undefined' when you least expect it.

Here's a failsafe mental model you can use to never get burned again.

Discuss on Twitter