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 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).