Set types on useState React Hook with TypeScript

react hooks typescript
react typescript
react-hook form typescript
react, ( usestate)
usestate typescript null
types of react hooks
react, ( functioncomponent)
react typescript form

I'm migrating a React with TypeScript project to use hooks features (React v16.7.0-alpha), but I cannot figure out how to set typings of the destructured elements.

Here is an example:

interface IUser {
  name: string;
}
...
const [user, setUser] = useState({name: 'Jon'});

I want to force user variable to be of type IUser. My only successful trial, is doing it in two phases: Typing, then initializing:

let user: IUser;
let setUser: any;
[user, setUser] = useState({name: 'Jon'});

But I'm sure there is a better way. Also, setUser should be initialized as a function that takes a IUser as input, and returns nothing.

Also, worth noting that using const [user, setUser] = useState({name: 'Jon'}); without any initialization works fine, but I would like to take advantage of TypeScript to force type checking on init, especially if it depends on some props.

Thanks for your help.


Use this

const [user, setUser] = useState<IUser>({name: 'Jon'});

See the corresponding type here: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8a1b68be3a64e5d2aa1070f68cc935d668a976ad/types/react/index.d.ts#L844

useTypescript, The code below shows a simple useState hook: The state can be any JavaScript type, and above we made it a number . The set  To define a type for React.useState () you must add a <type> after typing the word useState and before the opening parenthesis. This will tell TypeScript that you’re giving a specific type to state property variable. This is good because it will reduce silly dev mistakes, and keep your code more consistent throughout the apps life.


First useState takes a generic, which will be your IUser. If you then want to pass around the second destructured element that is returned by useState you will need to import Dispatch. Consider this extended version of your example that has a click handler:

import React, { useState, Dispatch } from 'react';

interface IUser {
  name: string;
}

export const yourComponent = (setUser: Dispatch<IUser>) => {

    const [user, setUser] = useState<IUser>({name: 'Jon'});

    const clickHander = (stateSetter: Dispatch<IUser>) => {
        stateSetter({name : 'Jane'});
    }

    return (
         <div>
            <button onClick={() => { clickHander(setUser) }}>Change Name</button>
        </div>
    ) 
}

See this answer.

Typed useState with TypeScript, useState is a hook that helps us manage state in function-based see that they are correctly to typed to string and the setter is typed to Dispatch<React. So, TypeScript has nicely inferred the type from the default value we  Using State With Hooks in React (React.useState) Let us see how to work with hooks. For this, we are going to make a single form segment that will show its value in the input field after


You could also declare the initial state before and then be able to call it any time you want:

type User = typeof initUser;
const initUser = {name: 'Jon'}
...
const [user, setUser] = useState<User>(initUser);

About I interface prefixes: https://basarat.gitbooks.io/typescript/content/docs/styleguide/styleguide.html#interface

TypeScript and React: Hooks, Reading the types. First of all, let's take a look at the type signature of useState . You'll see how much information you can extract solely  Most of the time, using React hooks in TypeScript is straightforward. However, there are some situations when deeper understanding of hooks’ types might prove very useful. In this article, we’re going to focus on the useState hook. I’m going to assume that you have a basic understanding of this hook. If this is not the case, please read


Using React useState hook with TypeScript, Type-safe state modeling with TypeScript and React Hooks some examples of state management using React Hooks (specifically useState and In the definition of useProfile we define a set of static defaults, which we can  A user wanted to create a toggle custom hook, and stick to the naming convention as regular React hooks do: Returning an array that you destructure when calling the hook. For example useState: const [state, setState] = useState (0) Why an array? Because you the array’s fields have no name, and you can set names on your own:


Type-safe state modeling with TypeScript and React Hooks, you trying force a state variable to be certain type with React.useState ? In today's short article, I will go over how to define your useState hook with TypeScript. React Hooks with Typescript: Use State and Use Effect in 2020. In this blog, we are going to see how functional components can be used with react hooks to reduce the amount of code used in writing class-based components and still achieving all the features of it.


How to use set types on React useState with TypeScript, Simple, the creators of React Hooks have blessed us with a type useState will be conforming to the IAddress interface when setting and  If we hover over the variables in VSCode, we see that they are correctly to typed to string and the setter is typed to Dispatch<React.SetStateAction<string>>.. So, TypeScript has nicely inferred the type from the default value we passed to useState which was an empty string.