useState hook in Typescript functional component

React hooks are new features introduced in React Typescript. This article explains about useState hook in React Typescript.
useState hook used to store data in the typescript react component.

Typescript is a typed language, and every value must be declared with type.

So data stored in State must be declared with type explicitly.
Here is a syntax for useState hook

const [property, setProperty] = useState<type>(default value)

a default value can be passed

numbers with zero
String with ""
boolean with false
Array with []
Objects with an empty object with property values have defaulted.

setProperty with type allows you to accept declared types and avoid runtime errors.

React Typescript useState hook with primitive types
Following are different primitive data types with the useState hook can also be defined with type inference

const [property, setProperty] = useState(default value)

type is inferred from the default value.
const [loading, isLoading] = useState(false)
Here, the loading value is inferred as a boolean type, isLoading function takes a boolean value

which is equivalent to

const [loading, isLoading] = useState<boolean>(false)

Here are String and number types

const [salary, setSalary] = useState<number>(5000)

const [name, setName] = useState<string>("john")

Here is an example to set the string in the useState React hook example.

import React, { Dispatch, FC, useState } from 'react';
interface Student {
    name: string ;
    marks: number ;
}
function UseStateExample(){
    const [message, setMessage] = useState("") // type is string

    const updateMessage=()=>{
        setMessage("w3schoolsio") 
    }
    return (
        <>
            <h1>Welcome - {message}</h1>
            <button onClick={() => { updateMessage() }}>Chnage</button>

        </>
    );
};

export default UseStateExample;

React typescript useState object example

This example talks about how to assign the object to State and assign default value using typescript.
Created an interface type for holding the object.
useState used with type, setting the state accepts object type only
Default value in the state is assigned with an empty object with default property values.

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

interface Student {
    id: number;
    name: string;

  };

function UseStateExample(){
    const [student, setStudent] = useState<Student>({id:0,name:""});
useEffect(() => {
        setStudent({
            id:11,
            name : "john",
        });
    }, []);

    return (
        <>
            <h1>Welcome</h1>
          <div>
            id: {student.id} -  name: {student.name}
          </div>
          </>
    );
};

export default UseStateExample;

React typescript useState Array of objects.

This example assigns a setState hook with an array of objects

Declare an Object using an interface or Type alias interface example:

interface User {
    id: number;
    name: string;
  };
using type alias
type User = {
id: number;
name: string;
};

Initial value in useState in one of the following An initialized array of objects with square brackets[].
const [users, setUsers] = useState([]);
Another way, State accepts an array of generic types.

const [users, setUsers] = useState<{id: number; name: string}[]>([])

And the Type declared for the state is useState
Here is an example

import React, {  useState } from 'react';

interface User {
    id: number;
    name: string;
  };

function UsersComponent(){
    const [users, setUsers] = useState<User[]>([]);

    const addUser=()=>{
        setUsers(prevUsers => [
          ...prevUsers,
          {id: 1, name: 'name'},
        ])
  }
    return (
        <>
            <h1>Welcome</h1>
            <button onClick={() => { addUser() }}>Add</button>
            <h1>Listof Users</h1>

            {users.map((user, index) => {
        return (
          <div key={index}>
            <div>
              id: {user.id} -  name: {user.name}
            </div>
          </div>
        );
      })}

        </>
    );
};

export default UsersComponent;

Blog

useState hook in Typescript functional component

Kudzai Murimi

Join Our Newsletter. No Spam, Only the good stuff.

Related