Avoid unexpected behavior of React’s useState
No argument, no type argument
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>()
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([])
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 }[]>([])
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
0:00 Let's talk about useState, because useState in react has some interesting behaviors depending on what you pass it, and there's four configurations.
0:08 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.
0:29 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.
0:47 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.
1:07 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.
1:24 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.
More Tips
Type Predicates
1 min
TypeScript 5.1 Beta is OUT!
2 mins
How to Name your Types
4 mins
Don't use return types, unless...
4 mins
TypeScript 5.0 Beta Deep Dive
6 mins
Conform a Derived Type Without Losing Its Literal Values
1 min
Understand assignability in TypeScript
2 mins
Compare function overloads and generics
1 min
Use infer in combination with string literals to manipulate keys of objects
1 min
Access deeper parts of objects and arrays
1 min
Ensure that all call sites must be given value
1 min
Understand how TypeScript infers literal types
1 min
Get a TypeScript package ready for release to NPM in under 2 minutes
1 min
Use assertion functions inside classes
1 min
Assign local variables to default generic slots to dry up your code and improve performance
2 mins
Know when to use generics
2 mins
Map over a union type
1 min
Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig
1 min
Use generics to dynamically specify the number, and type, of arguments to functions
1 min
Use 'declare global' to allow types to cross module boundaries
2 mins
Turn a module into a type
2 mins
Create autocomplete helper which allows for arbitrary values
2 mins
Use deep partials to help with mocking an entity
1 min
Throw detailed error messages for type checks
1 min
Create a 'key remover' function which can process any generic object
1 min
Use generics in React to make dynamic and flexible components
1 min
Create your own 'objectKeys' function using generics and the 'keyof' operator
1 min
Write your own 'PropsFrom' helper to extract props from any React component
1 min
Use 'extends' keyword to narrow the value of a generic
1 min
Use function overloads and generics to type a compose function
2 mins
Decode URL search params at the type level with ts-toolbelt
2 mins
Use 'in' operator to transform a union to another union
2 mins
Derive a union type from an object
2 mins