Typing state & hooks

State that keeps its type

A component often has to remember something between clicks: how many items are in the cart, what the shopper typed, whether a menu is open. React calls that state. You ask for it with hooks: functions whose names start with use, called at the top of a component. When state changes, React runs the component again and draws the new result. The previous lesson, Typing React components, covers props and events; this one covers what a component remembers.

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4function CartCounter() {5  const [count, setCount] = useState(0);6//       ^?7  return (8    <p>9      {count} items <button onClick={() => setCount(count + 1)}>Add tea</button>10    </p>11  );12}13 14createRoot(document.getElementById("root")!).render(<CartCounter />);

Line 2 imports the useState hook. Line 5 calls it with the starting value 0. It gives back a pair, which the square brackets take apart (Destructuring):

• count, the current value,
• setCount, a function that stores a new value and makes React draw the component again.

The query on line 6 shows const count: number. You never wrote number: TypeScript worked it out from the starting value 0, and from now on the state only holds numbers. Line 9 adds one on each click. Click Add tea twice and the page shows 2 items.

That type matters as soon as values come from outside. A text box always gives you a string, even a number box. Pick what line 9 passes to setQuantity:

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4function QuantityBox() {5  const [quantity, setQuantity] = useState(1);6  return (7    <label>8      Cakes: <input type="number" value={quantity}9        onChange={(event) => setQuantity(event.target.value)} />10      With the 2 in your cart: {quantity + 2}11    </label>12  );13}14 15createRoot(document.getElementById("root")!).render(<QuantityBox />);

With event.target.value, TypeScript marks line 9 on purpose: Argument of type 'string' is not assignable to parameter of type 'SetStateAction<number>' means you're handing the setter text, and it only takes a number (SetStateAction is React's name for "a new value, or a function that makes one"). Run it anyway and type 4: line 10 joins "4" and 2 into 42. With Number(…) or valueAsNumber, it shows 6.

useState and the type it infers

useState is a generic function: its type parameter is the state's type. Usually TypeScript fills it in from the starting value. Sometimes the starting value is only a placeholder, like null for a user who hasn't signed in yet. Pick how line 9 creates the state:

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4type User = { name: string; city: string };5 6const asha: User = { name: "Asha", city: "Pune" };7 8function Profile() {9  const [user, setUser] = useState(null);10//       ^?11  return (12    <p>13      {user ? `Signed in as ${user.name}` : "Not signed in"}{" "}14      <button onClick={() => setUser(asha)}>Sign in</button>15    </p>16  );17}18 19createRoot(document.getElementById("root")!).render(<Profile />);

useState(null) gives const user: null: the state can never hold anything else, so line 14 can't store Asha. useState<User | null>(null) says what's true: a User, or null for now (null & undefined). Then line 13 has to check for null before it reads user.name, which is exactly the check the page needs before anyone signs in.

An empty array has the same problem. It says nothing about what will go in it:

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4function Wishlist() {5  const [items, setItems] = useState([]);6//       ^?7  return (8    <p>9      {items.length} saved <button onClick={() => setItems([...items, "Green tea"])}>Save tea</button>10    </p>11  );12}13 14createRoot(document.getElementById("root")!).render(<Wishlist />);

The query on line 6 shows never[]: an array that can hold nothing at all (never is the type with no values). So line 9 gets Type 'string' is not assignable to type 'never', on purpose: the text "Green tea" can't go in an array of nothing. Say what the array holds:

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4function Wishlist() {5  const [items, setItems] = useState<string[]>([]);6//       ^?7  return (8    <p>9      {items.length} saved <button onClick={() => setItems([...items, "Green tea"])}>Save tea</button>10    </p>11  );12}13 14createRoot(document.getElementById("root")!).render(<Wishlist />);

Line 5 now says useState<string[]>([]), the query shows const items: string[], and line 9 is fine. Click Save tea and the page shows 1 saved.

A type argument also keeps state to a few allowed words. Here the button's state is a union of literal types:

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4type SaveStatus = "idle" | "saving" | "saved";5 6function SaveButton() {7  const [status, setStatus] = useState<SaveStatus>("idle");8  return (9    <button disabled={status === "saving"} onClick={() => setStatus("saveing")}>10      {status === "saved" ? "Saved" : "Save address"}11    </button>12  );13}14 15createRoot(document.getElementById("root")!).render(<SaveButton />);

Line 4 lists the three states. Line 7 creates the state with that type. Line 9 sets "saveing", a typo, and TypeScript marks it on purpose: Argument of type '"saveing"' is not assignable to parameter of type 'SetStateAction<SaveStatus>'. Without <SaveStatus>, the state would be any string, the typo would pass, and line 9's check for "saving" would never be true.

The setter also takes a function that gets the current value and returns the next one:

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4function LikeButton() {5  const [likes, setLikes] = useState(0);6  return <button onClick={() => setLikes((current) => current + 1)}>{likes} likes</button>;7//                                         ^?8}9 10createRoot(document.getElementById("root")!).render(<LikeButton />);

On line 6, setLikes gets a function. The query on line 7 shows current: number: TypeScript knows what the function gets, and checks that it returns a number. Click the button and it shows 1 likes. Read the table row by row: the starting value, the type TypeScript works out, and what to write when that isn't enough.

useReducer with typed actions

When state has several parts that change together, like a cart's items and its coupon, React offers useReducer. You write a reducer: a function that takes the current state and an action, an object that says what happened, and returns the next state (State management covers the idea). The actions are a discriminated union:

1import { createRoot } from "react-dom/client";2import { useReducer } from "react";3 4type CartState = { items: string[]; coupon: string | null };5 6type CartAction =7  | { type: "add"; item: string }8  | { type: "remove"; item: string }9  | { type: "applyCoupon"; code: string }10  | { type: "clear" };11 12function cartReducer(state: CartState, action: CartAction): CartState {13  switch (action.type) {14    case "add":15      return { ...state, items: [...state.items, action.item] };16    case "remove":17      return { ...state, items: state.items.filter((item) => item !== action.item) };18    case "applyCoupon":19      return { ...state, coupon: action.code };20    case "clear":21      return { items: [], coupon: null };22  }23}24 25function Cart() {26  const [cart, dispatch] = useReducer(cartReducer, { items: [], coupon: null });27//              ^?28  return (29    <div>30      <p>{cart.items.join(", ") || "Empty"}{cart.coupon && ` with coupon ${cart.coupon}`}</p>31      <button onClick={() => dispatch({ type: "add", item: "Tea" })}>Add tea</button>32      <button onClick={() => dispatch({ type: "applyCoupon", code: "TEA10" })}>Use TEA10</button>33      <button onClick={() => dispatch({ type: "clear" })}>Clear</button>34    </div>35  );36}37 38createRoot(document.getElementById("root")!).render(<Cart />);

• Line 4 is the state: a list of items and a coupon code, or null.
• Lines 6 to 10 list every action. Each has a type word and only the fields it needs: add needs an item, clear needs nothing.
• Line 12 types the reducer: it takes a CartState and a CartAction, and returns a CartState.
• Line 13 switches on action.type. Inside case "add", TypeScript has narrowed action to the add action, so line 15 can read action.item.
• Line 26 creates the state from the reducer and a starting state. The query on line 27 shows dispatch: React.ActionDispatch<[action: CartAction]>: a function that takes one CartAction.
• Lines 31 to 33 dispatch actions. Click Add tea twice and Use TEA10, and the page shows Tea, Tea with coupon TEA10.

Because dispatch only takes a CartAction, a wrong action is caught where you write it. Try some:

1import { createRoot } from "react-dom/client";2import { useReducer } from "react";3 4type CartState = { items: string[]; coupon: string | null };5 6type CartAction =7  | { type: "add"; item: string }8  | { type: "remove"; item: string }9  | { type: "applyCoupon"; code: string }10  | { type: "clear" };11 12function cartReducer(state: CartState, action: CartAction): CartState {13  switch (action.type) {14    case "add":15      return { ...state, items: [...state.items, action.item] };16    case "remove":17      return { ...state, items: state.items.filter((item) => item !== action.item) };18    case "applyCoupon":19      return { ...state, coupon: action.code };20    case "clear":21      return { items: [], coupon: null };22  }23}24 25function Cart() {26  const [cart, dispatch] = useReducer(cartReducer, { items: [], coupon: null });27  return (28    <div>29      <p>{cart.items.join(", ") || "Empty"}{cart.coupon && ` with coupon ${cart.coupon}`}</p>30      <button onClick={() => dispatch({ type: "add", item: "Tea" })}>Order</button>31    </div>32  );33}34 35createRoot(document.getElementById("root")!).render(<Cart />);

The misspelled "ad" is the dangerous one: no case matches it, so the reducer returns undefined and the next draw crashes. TypeScript also checks the reducer itself. Leave out a case, and the function can end without returning anything:

1import { createRoot } from "react-dom/client";2import { useReducer } from "react";3 4type CartState = { items: string[]; coupon: string | null };5 6type CartAction =7  | { type: "add"; item: string }8  | { type: "remove"; item: string }9  | { type: "applyCoupon"; code: string }10  | { type: "clear" };11 12function cartReducer(state: CartState, action: CartAction): CartState {13  switch (action.type) {14    case "add":15      return { ...state, items: [...state.items, action.item] };16    case "remove":17      return { ...state, items: state.items.filter((item) => item !== action.item) };18    case "applyCoupon":19      return { ...state, coupon: action.code };20  }21}22 23function Cart() {24  const [cart, dispatch] = useReducer(cartReducer, { items: [], coupon: null });25  return (26    <div>27      <p>{cart.items.join(", ") || "Empty"}</p>28      <button onClick={() => dispatch({ type: "add", item: "Tea" })}>Add tea</button>29      <button onClick={() => dispatch({ type: "clear" })}>Clear</button>30    </div>31  );32}33 34createRoot(document.getElementById("root")!).render(<Cart />);

TypeScript marks line 12 on purpose: Function lacks ending return statement and return type does not include 'undefined' means that for a clear action, the switch finds no case and the function returns nothing, but line 12 promised a CartState. The return type is what makes this check work, so write it on reducers (Exhaustiveness checking shows more ways).

useRef for elements and values

Sometimes you need the real element on the page, for example to put the cursor in a search box. useRef gives you an object with one property, current. Pass it to an element's ref, and React puts the element in current once it's on the page:

1import { createRoot } from "react-dom/client";2import { useRef } from "react";3 4function SearchBar() {5  const inputRef = useRef<HTMLInputElement>(null);6//      ^?7  return (8    <p>9      <input ref={inputRef} placeholder="Search teas" />10      <button onClick={() => inputRef.current?.focus()}>Search</button>11    </p>12  );13}14 15createRoot(document.getElementById("root")!).render(<SearchBar />);

Line 5 creates the ref with the element type in angle brackets and null to start, because there is no element yet. The query on line 6 shows React.RefObject<HTMLInputElement | null>: current is the input, or null before React draws it (Typing the DOM covers element types). Line 9 hands the ref to the input. Line 10 calls focus() with ?., which skips the call when current is null (Optional chaining). Click Search and the cursor moves into the box. Leave out the ? and TypeScript objects:

1import { createRoot } from "react-dom/client";2import { useRef } from "react";3 4function SearchBar() {5  const inputRef = useRef<HTMLInputElement>(null);6//      ^?7  return (8    <p>9      <input ref={inputRef} placeholder="Search teas" />10      <button onClick={() => inputRef.current.focus()}>Search</button>11    </p>12  );13}14 15createRoot(document.getElementById("root")!).render(<SearchBar />);

'inputRef.current' is possibly 'null' on line 10 means that TypeScript can't know a click only happens after the input is on the page. The ?. covers that case. Now try other ways to create the ref:

1import { createRoot } from "react-dom/client";2import { useRef } from "react";3 4function SearchBar() {5  const inputRef = useRef<HTMLInputElement>(null);6//      ^?7  return (8    <p>9      <input ref={inputRef} placeholder="Search teas" />10      <button onClick={() => inputRef.current?.focus()}>Search</button>11    </p>12  );13}14 15createRoot(document.getElementById("root")!).render(<SearchBar />);

Only useRef<HTMLInputElement>(null) names the element and starts empty. A ref can also hold any value that should survive between draws without causing one, like a timer:

1import { createRoot } from "react-dom/client";2import { useRef } from "react";3 4function SaveButton() {5  const timer = useRef<number | null>(null);6  function save() {7    if (timer.current !== null) window.clearTimeout(timer.current);8    timer.current = window.setTimeout(() => console.log("Saved"), 500);9  }10  return <button onClick={save}>Save</button>;11}12 13createRoot(document.getElementById("root")!).render(<SaveButton />);

Line 5 creates a ref for a timer id: a number, or null when no timer is waiting. Line 7 cancels the waiting timer, if there is one. Line 8 starts a new one and stores its id. window.setTimeout returns a number in the browser's types, so it fits. Changing timer.current doesn't make React draw again; that's the difference from state. Click Save three times quickly and the console shows Saved once, half a second after the last click (Debounce & throttle explains the pattern).

Typed context

Some values are needed by many components: the theme, the signed-in user, the cart. Passing them as props through every layer is tiring. Context lets a component put a value above a part of the page, and any component below read it. You make one with createContext, put it above with <ThemeContext value=…>, and read it with useContext:

1import { createRoot } from "react-dom/client";2import { createContext, useContext } from "react";3 4type Theme = "light" | "dark";5 6const ThemeContext = createContext<Theme>("light");7 8function ThemeLabel() {9  const theme = useContext(ThemeContext);10//      ^?11  return <p>Theme: {theme}</p>;12}13 14createRoot(document.getElementById("root")!).render(15  <ThemeContext value="dark">16    <ThemeLabel />17  </ThemeContext>18);

Line 4 lists the themes. Line 6 creates the context with the type Theme and a default, "light", which components get when nothing above them gives a value. Line 9 reads it, and the query on line 10 shows const theme: Theme. Lines 15 to 17 put "dark" above ThemeLabel, so the page shows Theme: dark. React 19 lets you use the context itself as the tag; older code writes <ThemeContext.Provider value=…>, which still works. The value is checked like any prop:

1import { createRoot } from "react-dom/client";2import { createContext, useContext } from "react";3 4type Theme = "light" | "dark";5 6const ThemeContext = createContext<Theme>("light");7 8function ThemeLabel() {9  const theme = useContext(ThemeContext);10//      ^?11  return <p>Theme: {theme}</p>;12}13 14createRoot(document.getElementById("root")!).render(15  <ThemeContext value="drak">16    <ThemeLabel />17  </ThemeContext>18);

Type '"drak"' is not assignable to type 'Theme' on line 15 means the value isn't one of the two themes. Some contexts have no sensible default. A cart only exists inside a cart provider, so its context often starts as null:

1import { createRoot } from "react-dom/client";2import { createContext, useContext } from "react";3 4type CartContextValue = { items: string[]; add: (item: string) => void };5 6const CartContext = createContext<CartContextValue | null>(null);7 8function CartBadge() {9  const cart = useContext(CartContext);10  return <p>Cart: {cart.items.length}</p>;11}12 13createRoot(document.getElementById("root")!).render(<CartBadge />);

Line 6 says the context holds a CartContextValue or null, and starts as null. Line 10 reads cart.items, and TypeScript marks it on purpose: 'cart' is possibly 'null'. It's right: nothing above CartBadge gives the context a value, so this code throws when it runs. The usual fix is a small hook that checks once:

1import { createRoot } from "react-dom/client";2import { createContext, useContext } from "react";3 4type CartContextValue = { items: string[]; add: (item: string) => void };5 6const CartContext = createContext<CartContextValue | null>(null);7 8function useCart() {9  const cart = useContext(CartContext);10  if (!cart) throw new Error("useCart must be used inside a CartContext");11  return cart;12//       ^?13}14 15function CartBadge() {16  const cart = useCart();17  return <p>Cart: {cart.items.length}</p>;18}19 20const twoItems: CartContextValue = { items: ["Tea", "Cake"], add: () => {} };21 22createRoot(document.getElementById("root")!).render(23  <CartContext value={twoItems}>24    <CartBadge />25  </CartContext>26);

Line 9 reads the context. Line 10 throws a clear error when there is no value, so after it, cart can't be null: the query on line 12 shows const cart: CartContextValue. Line 16 uses the hook, and line 17 reads items with no check. Lines 23 to 25 give the context a cart with two items, and the page shows Cart: 2.

Typing your own hooks

A custom hook is your own function whose name starts with use and that calls other hooks, like useCart above. TypeScript types it like any function. One return value needs care: a pair, the way useState returns one.

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4function useToggle(initial: boolean) {5  const [on, setOn] = useState(initial);6  const toggle = () => setOn((current) => !current);7  return [on, toggle];8}9 10function FilterPanel() {11  const [open, toggleOpen] = useToggle(false);12//       ^?13  return <button onClick={toggleOpen}>{open ? "Hide filters" : "Show filters"}</button>;14}15 16createRoot(document.getElementById("root")!).render(<FilterPanel />);

Line 7 returns [on, toggle]. For an array written like that, TypeScript works out an array whose items can each be either type: (boolean | (() => void))[]. So the query on line 12 shows open: boolean | (() => void), and line 13 is marked on purpose: Type 'boolean | (() => void)' is not assignable to type 'MouseEventHandler<HTMLButtonElement> | undefined' means toggleOpen might be a boolean, and a click handler can't be one. Add as const:

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4function useToggle(initial: boolean) {5  const [on, setOn] = useState(initial);6  const toggle = () => setOn((current) => !current);7  return [on, toggle] as const;8}9 10function FilterPanel() {11  const [open, toggleOpen] = useToggle(false);12//       ^?13  return <button onClick={toggleOpen}>{open ? "Hide filters" : "Show filters"}</button>;14}15 16createRoot(document.getElementById("root")!).render(<FilterPanel />);

as const on line 7 makes the return a tuple: a fixed pair, a boolean first and a function second (const assertions explains as const). The query now shows const open: boolean, and line 13 is fine. Click the button and it changes from Show filters to Hide filters. Returning an object, like { on, toggle }, also works, and callers take the names they want. The table sums up the hooks. Read each row as: this hook, the type it gives you, and when to write a type yourself.

A cart shared with context

A real shop puts these together: a reducer for the cart, a context to share it, and a hook to read it. Any component can then show or change the cart, with no props passed down:

1import { createRoot } from "react-dom/client";2import { createContext, useContext, useReducer } from "react";3import type { ReactNode } from "react";4 5type CartAction = { type: "add"; item: string } | { type: "clear" };6 7function cartReducer(items: string[], action: CartAction): string[] {8  switch (action.type) {9    case "add":10      return [...items, action.item];11    case "clear":12      return [];13  }14}15 16type CartContextValue = {17  items: string[];18  dispatch: (action: CartAction) => void;19};20 21const CartContext = createContext<CartContextValue | null>(null);22 23function CartProvider({ children }: { children: ReactNode }) {24  const [items, dispatch] = useReducer(cartReducer, []);25  return <CartContext value={{ items, dispatch }}>{children}</CartContext>;26}27 28function useCart() {29  const cart = useContext(CartContext);30  if (!cart) throw new Error("useCart must be used inside <CartProvider>");31  return cart;32}33 34function CartHeader() {35  const { items } = useCart();36  return <h2>Cart: {items.length}</h2>;37}38 39function TeaRow() {40  const { dispatch } = useCart();41  return <button onClick={() => dispatch({ type: "add", item: "Tea" })}>Add tea</button>;42}43 44createRoot(document.getElementById("root")!).render(45  <CartProvider>46    <CartHeader />47    <TeaRow />48  </CartProvider>49);

• Lines 5 to 14 are a small reducer: add an item, or clear the list.
• Lines 16 to 19 describe what the context shares: the items, and dispatch, typed as a function that takes a CartAction.
• Line 21 creates the context, starting as null.
• Lines 23 to 26 are CartProvider: it creates the state with useReducer and shares it through the context. Its children are a ReactNode, as in the previous lesson.
• Lines 28 to 32 are the useCart hook, which removes null.
• Lines 34 to 42 use it. CartHeader reads the items, and TeaRow dispatches an add action, checked against CartAction.

The page shows Cart: 0. Click Add tea twice and it shows Cart: 2.

Now sort some hook calls. Each card runs inside a component, with React's hooks imported:

Common mix-ups

• "useState(null) means null for now." No. To TypeScript it means null forever. Write useState<User | null>(null) to say what comes later.
• "An empty array holds anything." No. useState([]) holds never[], an array of nothing. Write the item type: useState<string[]>([]).
• "A ref's current is the element as soon as I create it." No. It's null until React puts the element on the page, so its type includes null.
• "Changing ref.current redraws the component." No. Only state changes do. A ref keeps a value quietly.
• "useContext fails when there's no value above." No. It returns the default from createContext. That's why a null default plus a checking hook is common.
• "A hook that returns [a, b] returns a pair." No. TypeScript sees an array of either type. Add as const to make it a tuple.
• "A reducer doesn't need a return type." It works without one, but the return type is what makes TypeScript notice a missing case.

Practice exercises

Each exercise is a small React component. Press Edit & run on the starter code: the errors update as you type, and the page shows what it does. Try first, then use the hints.

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4function Wishlist() {5  const [items, setItems] = useState(["Green tea", "Lemon cake"]);6  return <p onClick={() => setItems([])}>{items.join(" and ")}</p>;7}8 9createRoot(document.getElementById("root")!).render(<Wishlist />);

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4function Wishlist() {5  const [items, setItems] = useState(["Green tea", "Lemon cake"]);6//       ^?7  return <p onClick={() => setItems([])}>{items.join(" and ")}</p>;8}9 10createRoot(document.getElementById("root")!).render(<Wishlist />);

import { createRoot } from "react-dom/client";
import { useState } from "react";

function PriceEditor() {
  const [price, setPrice] = useState(4);
  return (
    <p>
      Cake: ${price}{" "}
      <button onClick={() => setPrice(price - 1)}>Cheaper</button>
      <button onClick={() => setPrice("5")}>Reset</button>
    </p>
  );
}

createRoot(document.getElementById("root")!).render(<PriceEditor />);

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4function PriceEditor() {5  const [price, setPrice] = useState(4);6  return (7    <p>8      Cake: ${price}{" "}9      <button onClick={() => setPrice(price - 1)}>Cheaper</button>10      <button onClick={() => setPrice(5)}>Reset</button>11    </p>12  );13}14 15createRoot(document.getElementById("root")!).render(<PriceEditor />);

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4function RecentSearches() {5  const [searches, setSearches] = useState([]);6  return (7    <p>8      <button onClick={() => setSearches(["oolong", ...searches])}>Search oolong</button>{" "}9      Recent: {searches.join(", ")}10    </p>11  );12}13 14createRoot(document.getElementById("root")!).render(<RecentSearches />);

1import { createRoot } from "react-dom/client";2import { useState } from "react";3 4function RecentSearches() {5  const [searches, setSearches] = useState<string[]>([]);6  return (7    <p>8      <button onClick={() => setSearches(["oolong", ...searches])}>Search oolong</button>{" "}9      Recent: {searches.join(", ")}10    </p>11  );12}13 14createRoot(document.getElementById("root")!).render(<RecentSearches />);

1import { createRoot } from "react-dom/client";2import { useReducer } from "react";3 4type CounterAction = { type: "increment" } | { type: "decrement" } | { type: "reset" };5 6function counterReducer(count: number, action: CounterAction): number {7  switch (action.type) {8    case "increment":9      return count + 1;10    case "decrement":11      return count - 1;12  }13}14 15function Counter() {16  const [count, dispatch] = useReducer(counterReducer, 3);17  return (18    <p>19      {count} cakes <button onClick={() => dispatch({ type: "increment" })}>One more</button>20      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>21    </p>22  );23}24 25createRoot(document.getElementById("root")!).render(<Counter />);

1import { createRoot } from "react-dom/client";2import { useReducer } from "react";3 4type CounterAction = { type: "increment" } | { type: "decrement" } | { type: "reset" };5 6function counterReducer(count: number, action: CounterAction): number {7  switch (action.type) {8    case "increment":9      return count + 1;10    case "decrement":11      return count - 1;12    case "reset":13      return 0;14  }15}16 17function Counter() {18  const [count, dispatch] = useReducer(counterReducer, 3);19  return (20    <p>21      {count} cakes <button onClick={() => dispatch({ type: "increment" })}>One more</button>22      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>23    </p>24  );25}26 27createRoot(document.getElementById("root")!).render(<Counter />);

1import { createRoot } from "react-dom/client";2import { useRef } from "react";3 4function CouponBox() {5  const couponRef = useRef(null);6  return (7    <p>8      <input ref={couponRef} aria-label="Coupon code" />9      <button onClick={() => couponRef.current.focus()}>I have a coupon</button>10    </p>11  );12}13 14createRoot(document.getElementById("root")!).render(<CouponBox />);

1import { createRoot } from "react-dom/client";2import { useRef } from "react";3 4function CouponBox() {5  const couponRef = useRef<HTMLInputElement>(null);6  return (7    <p>8      <input ref={couponRef} aria-label="Coupon code" />9      <button onClick={() => couponRef.current?.focus()}>I have a coupon</button>10    </p>11  );12}13 14createRoot(document.getElementById("root")!).render(<CouponBox />);

1import { createRoot } from "react-dom/client";2import { createContext, useContext } from "react";3 4type User = { name: string };5 6const UserContext = createContext<User | null>(null);7 8function Greeting() {9  const user = useContext(UserContext);10  return <p>Hello, {user.name}</p>;11}12 13createRoot(document.getElementById("root")!).render(14  <UserContext value={{ name: "Asha" }}>15    <Greeting />16  </UserContext>17);

1import { createRoot } from "react-dom/client";2import { createContext, useContext } from "react";3 4type User = { name: string };5 6const UserContext = createContext<User | null>(null);7 8function useUser() {9  const user = useContext(UserContext);10  if (!user) throw new Error("useUser must be used inside a UserContext");11  return user;12}13 14function Greeting() {15  const user = useUser();16  return <p>Hello, {user.name}</p>;17}18 19createRoot(document.getElementById("root")!).render(20  <UserContext value={{ name: "Asha" }}>21    <Greeting />22  </UserContext>23);

Check your understanding

Key takeaways

• State gets its type from its starting value, and its setter only takes that type.
• When the start is a placeholder, say the type: useState<User | null>(null), useState<string[]>([]).
• Type a reducer's actions as a discriminated union, and give the reducer a return type.
• useRef<HTMLInputElement>(null) gives a current that may be null; check it with ?..
• Type context with createContext<T>; with a null default, read it through a hook that checks.
• A custom hook that returns a pair needs as const.

Coming next: Branded types, the first of the advanced patterns: how to stop values of the same type, like a user id and an order id, from being mixed up.