[TypeScript](/courses/typescript) can often infer the type of [React](/courses/reactjs) state from its initial value, but explicit types become useful when state can contain multiple shapes or starts without its final value. ### Type Inference with useState ```tsx const [count, setCount] = useState(0); ``` [TypeScript](/courses/typescript) infers: ```text count → number ``` So this works: ```tsx setCount(10); ``` but this does not: ```tsx setCount("ten"); ``` ### Boolean State ```tsx const [open, setOpen] = useState(false); ``` TypeScript infers: ```text boolean ``` You usually do not need to write: ```tsx useState(false); ``` when the type is already obvious. ### State That Starts as null Suppose user information has not loaded yet: ```tsx type User = { id: string; name: string; }; ``` This is too narrow: ```tsx const [user, setUser] = useState(null); ``` because TypeScript may infer the state as only `null`. Instead: ```tsx const [user, setUser] = useState(null); ``` Now the possible states are: ```text User or null ``` Before accessing properties, narrow the value: ```tsx if (!user) { return

No user loaded.

; } return

{user.name}

; ``` ### Typing Arrays in State For an initially empty array, explicitly describing the item type is often clearer: ```tsx type Product = { id: string; name: string; }; const [products, setProducts] = useState([]); ``` Now TypeScript knows every item should be a `Product`. ```tsx setProducts([ { id: "1", name: "Keyboard" } ]); ``` ### Typing Object State ```tsx type FormValues = { email: string; password: string; }; const [form, setForm] = useState({ email: "", password: "" }); ``` Then an update can preserve the [rest](/courses/expressjs) of the object: ```tsx setForm((form) => ({ ...form, email: "asif@example.com" })); ``` ### Union State Is Useful for Status Values Instead of: ```tsx const [status, setStatus] = useState("idle"); ``` use a specific union: ```tsx type RequestStatus = | "idle" | "loading" | "success" | "error"; const [status, setStatus] = useState("idle"); ``` Now this is allowed: ```tsx setStatus("loading"); ``` but this catches a mistake: ```tsx setStatus("finished-loading-something"); ``` ### Functional State Updates Keep Their Types ```tsx const [count, setCount] = useState(0); setCount((currentCount) => currentCount + 1 ); ``` TypeScript knows `currentCount` is a number from the state type. ### Avoid Overusing Type Assertions Avoid forcing TypeScript to accept an incomplete value: ```tsx const [user, setUser] = useState({} as User); ``` This tells TypeScript to trust an object that does not actually contain the required fields. Prefer describing reality: ```tsx const [user, setUser] = useState(null); ``` ### Interview-Ready Answer TypeScript usually infers `useState` types from the initial value, so primitive state often needs no explicit annotation. Explicit generic types are useful for nullable values, empty arrays, objects, and unions such as request status. State types should represent the real possible values instead of hiding incomplete state with assertions such as `{} as User`.