Set types on useState React Hook with TypeScript

Question

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.

Axel Köhler · Accepted Answer · 2024-01-19 05:31:15Z

689

Use this

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

See the Corresponding Type in DefinitelyTyped

edited Jan 19, 2024 at 5:31

Axel Köhler

1,1071 gold badge14 silver badges39 bronze badges

answered Dec 6, 2018 at 11:35

Nurbol Alpysbayev

22.4k6 gold badges68 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

orome Over a year ago

This works, but seems totally insensitive to what's provided in place of IUser. I can put just about anything there and subsequent uses of setUser are passed by type checking.

Nurbol Alpysbayev Over a year ago

@orome No, you can't put anything there, you can only put there an object that is compatible with IUser, i.e. has the same properties. It's called duck typing.

Nurbol Alpysbayev Over a year ago

@JoãoMarcosGris type MyType = MyObj[]; then useState<MyType>

Joey Baruch Over a year ago

@NurbolAlpysbayev - what about the types for [user, setUser]? ... aren't we missing out on type-safety if we don't type them?

Nurbol Alpysbayev Over a year ago

@JoeyBaruch No, we aren't :-) Just try it. Then look at the type definition, and you'll see that useState returns a well-typed tuple, that is assigned to [user, setUser] and it's not hard for TypeScript to understand that the variables should be of the same types as the tuple constituents. Don't know if I cleared things up or confused you further.

|

Ezra Obiwale · Accepted Answer · 2024-12-15 10:32:26Z

57

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 = () => {

    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.

edited Dec 15, 2024 at 10:32

Ezra Obiwale

1,9781 gold badge13 silver badges17 bronze badges

answered Jul 14, 2019 at 1:26

cham

11.2k12 gold badges54 silver badges71 bronze badges

Comments

hello world printer · Accepted Answer · 2019-11-26 08:46:57Z

5

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

edited Nov 26, 2019 at 8:46

answered Nov 26, 2019 at 8:41

hello world printer

511 silver badge2 bronze badges

Comments

zloctb · Accepted Answer · 2020-09-23 06:08:41Z

https://fettblog.eu/typescript-react/hooks/

// import useState next to FunctionComponent
    import React, { FunctionComponent, useState } from 'react';
    
    // our components props accept a number for the initial value
    const Counter:FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
      // since we pass a number here, clicks is going to be a number.
      // setClicks is a function that accepts either a number or a function returning
      // a number
      const [clicks, setClicks] = useState(initial);
      return <>
        <p>Clicks: {clicks}</p>
        <button onClick={() => setClicks(clicks+1)}>+</button>
        <button onClick={() => setClicks(clicks-1)}>-</button>
      </>
    }

Code8525 · Accepted Answer · 2021-12-03 15:58:12Z

class Form {
    id: NullNumber = null;
    name = '';

    startTime: NullString = null;
    endTime: NullString = null;

    lunchStart: NullString = null;
    lunchEnd: NullString = null;

    [key: string]: string | NullNumber;
}

export const EditDialog: React.FC = () => {
    const [form, setForm] = useState<Form>(new Form());


    const inputChange = (e: ChangeEvent<HTMLInputElement>) => {
        const element = e.target;
        setForm((form: Form) => {
            form[element.name] = element.value;
            return form;
        })
    }
    return (
        <Box pt={3}>
            <TextField
                required
                name="name"
                label="Наименование"
                defaultValue={form.name}
                onChange={inputChange}
                fullWidth
            />
        </Box>
    );
}

Collectives™ on Stack Overflow

Set types on useState React Hook with TypeScript

5 Answers 5

8 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

Comments

Comments

Comments

Linked

Related