TypeScript: React useState Hook

 by Robin Wieruch
 - Edit this Post

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 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:

import * as React from 'react';
const App = () => {
const [count, setCount] = React.useState(0);
const handleIncrease = () => {
setCount(count + 1);
return (
<button type="button" onClick={handleIncrease}>
export default App;

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:

import * as React from 'react';
const App = () => {
const [count, setCount] = React.useState<number>(0);

If the type argument becomes something else than a primitive, extract it as TypeScript interface:

import * as React from 'react';
interface UserFormState {
email: string;
password: string;
const App = () => {
const [userForm, setUserForm] = React.useState<UserFormState>({
email: '',
password: '',

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.

Keep reading about 

If you have started to use React's useState hook for your application, you may be missing a callback function , because only the initial state can be passed to the hook. In React class components…

Since React Hooks have been released, function components can use state and side effects. There are two hooks that are used for modern state management in React: useState and useReducer. This…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.