How To Type useState as an Object in React TypeScript

To type useState as an Object in React TypeScript, we will use generics, the properties in the object can be set to options, and we can pre-declare the object’s data type for use in generics. This article will give examples for us to understand better.

Ways to type useState as an Object in React TypeScript

If you don’t set the value type for useState in React, TypeScript can also infer the data type based on the initialization values, but doing so is not recommended. We should explicitly declare the type data for useState.

Using generic

We will use generics to declare the data type for useState right after the word useState you will add a pair of parentheses less than, greater than, then you pass the data type to the object, if a property in the object is optional initialization value, you add a question mark.

Example:

import { useEffect, useState } from "react";

const App = () => {
  // Using generic to type useState
  const [student, setStudent] = useState<{ id: number; name: string }>({
    id: 0,
    name: "",
  });

  useEffect(() => {
    setStudent({ id: 12, name: "John" });
  }, []);

  return (
    <div>
      <h2>ID: {student.id}</h2>
      <h2>Name: {student.name}</h2>
    </div>
  );
};

export default App;

Output:

ID: 12
Name: John

In the above example, we instantiate a component named App. Inside we use useState to initialize the default value for the state. In TypeScript, we can use generic to set the data type for this object, then we initialize default values for this state and render to the web page.

If you want the initialization value to be optional, you can add a question mark like this:

Example:

import { useEffect, useState } from "react";

const App = () => {
  // Using generic to type useState
  const [student, setStudent] = useState<{ id: number; name?: string }>({
    id: 0,
  });

  useEffect(() => {
    setStudent({ id: 14, name: "Mary" });
  }, []);

  return (
    <div>
      <h2>ID: {student.id}</h2>
      <h2>Name: {student.name}</h2>
    </div>
  );
};

export default App;

Output:

ID: 14
Name: Mary

Split type section

To make the code neater and more accessible to see, we will separate the type part outside

Example:

import { useEffect, useState } from "react";

// Predeclare an object type
type Student = { id: number; name: string };

const App = () => {
  // Using generic to type useState
  const [student, setStudent] = useState<Student>({
    id: 0,
    name: "",
  });

  useEffect(() => {
    setStudent({ id: 15, name: "Peter" });
  }, []);

  return (
    <div>
      <h2>ID: {student.id}</h2>
      <h2>Name: {student.name}</h2>
    </div>
  );
};

export default App;

Output:

ID: 15
Name: Peter

Summary

In short, to type useState as an Object in React TypeScript, we will use generics, we can use the question mark to optionally initialize the value, and we can pass a previously declared type., hope the article is useful to you. Thanks for reading.

Carolyn Hise

Carolyn Hise has three years of software development expertise. Strong familiarity with the following languages is required: Python, Typescript/Nodejs, .Net, Java, C++, and a strong foundation in Object-oriented programming (OOP).