JIYIK CN >

This article will demonstrate the use of React hooks in TypeScriptuseState .

React useStatehook definition

React useStatehooks play an important role when using functional components, from storing temporary data to receiving data from API calls. With the introduction of TypeScript, the developer experience has been improved in many ways.

TypeScript supports useStateadding types to React hooks. This is advantageous because TypeScript can infer types during setting values ​​and even detect errors in types.

This can be mitigated earlier, allowing for safe deployment.

According to the TypeScript React documentation, TypeScript useStatehas a common definition for React.

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

Here, Sis a generic type. It accepts the initial state, the hook can accept Sthe state indicated by and a function Dispatch<SetStateAction<S>>of type setState.

An easy way to understand setStatethe inferred type of a function is to hover over the variable in any appropriate IDE or text editor like VSCode.

useStateUsing raw types with React Hooks in TypeScript

useStateHooks can set primitive types in application state. Primitive types include number, , stringand boolean.

This is an example of how to use useStatefor primitive types in TypeScript.

const InfoComponent = () => {

    const [name, setName] = React.useState<string>("");
    const [age, setAge] = React.useState<number>(0);
    const [isMarried, setIsMarried] = React.useState<boolean>(false);


    React.useEffect(() => {
        setName("Geralt");
        setAge(95);
        setIsMarried(false);
    }, []);

    return (
        <>
            <div>Witcher name : {name}</div>
            <div>Age : {age}</div>
            <div>Married : {isMarried ? 'Yes' : 'No'}</div>
        </>
    )
}

So useStatehooks have been used to store primitive types which are set useEffectin the hook which is triggered once when the component mounts.

Using user-defined interfaces to store state in TypeScript

Even user-defined interfaces can be used useStateas types of hooks. The code snippet used in the previous section can be modified to store information in an interface, making the code more organized.

interface IUser {
    name : string ;
    age : number ;
    isMarried : boolean ;
}

const InfoComponent = () => {

    const [ state, setState ] = React.useState<IUser>({
        name : "",
        age : 0,
        isMarried : false
    });


    React.useEffect(() => {
        setState({
            name : "Geralt",
            age : 95,
            isMarried : false
        });
    }, []);

    return (
        <>
            <div>Witcher name : {state.name}</div>
            <div>Age : {state.age}</div>
            <div>Married : {state.isMarried ? 'Yes' : 'No'}</div>
        </>
    )
}

To setStateset optional fields in the function, asthe keyword can be used for type assertions. We have to setStateoverride the initial state using the optional state property passed to the function.

setState({
    ...state, ...{
        name : "Geralt",
        isMarried : "false"
    } as unknown as IUser
});

So in the above example, agethe field is not set and the default value is used, which is stateprovided by . State overwriting ...is done with the or spread operator.

useStateUsing Arrays in TypeScript Hooks

When fetching data from an API, arrays can often be useStateused in the hook. The following code snippet demonstrates this while using useStatethe hook to fetch data and display it.

interface IPost {
    userId : number ;
    id : number ;
    title  : string ;
    body : string ;
}

export default App = () => {

    const [ state, setState ] = React.useState<IPost[]>([]);

    const getPosts = async () => {

      const res : Response = await fetch("https://jsonplaceholder.typicode.com/posts");
      const posts : IPost[] = await res.json();
      setState(posts);
    }

    React.useEffect(() => {
        getPosts();
    }, []);

    return (
        <>
            {
              state.map( (post,index) => <div key={index}>
                    <h2>{post.title}</h2>
                    <div>{post.id}</div>
                    <p>{post.body}</p>
                </div>
              )
            }
        </>
    )
}