State holds a component’s current condition. It may be a single value, such as whether an appointment was accepted, or part of a larger data-management design. Keep its purpose clear: a menu’s open/closed status, input values, and an editable object represent different kinds of data, even though all can change during use. section 6.1.1 section 8.0
Use `useState` for a single value and `useReducer` for more complex multivalue state. As an application grows, avoid scattering unrelated state hooks without a clear structure. React context can distribute data, while a separate library may suit a particular team or data-management problem; the added structure has costs as well as benefits. section 8.0
Type every intended state value
An appointment response starts undecided, then becomes accepted or rejected. `useState(null)` makes TypeScript infer a state value restricted to `null`, so `setIsAccepted(true)` fails. Declare the intended range instead: `const [isAccepted, setIsAccepted] = useState<null | boolean>(null);`. A message initialized with `useState("")` needs no such annotation. Likewise, an initially empty tag list needs `useState<string[]>([])` before strings can be appended. section 6.1.1
Separate transient view selection from remote data when their responsibilities differ. In a list/detail interface, the server does not remember which item the user is viewing. Zustand holds that UX state, including the current item ID, while TanStack Query loads item data. Hooks can read the selected ID and use it to request the detail view. section 9.3.3
Listing 9.12 src/data/useThatThing.js
import { useQuery } from "@tanstack/react-query";
import { loadThing } from "./api/api";
import { useCurrent } from "./useCurrent";
import { useDoThing } from "./api/useDoThing";
import { useUndoThing } from "./api/useUndoThing";
import { useRemoveThing } from "./api/useRemoveThing";
export function useThatThing() {
const id = #1
useCurrent((state) => state.currentId); #1
const seeAllThings = #1
useCurrent((state) => state.seeAllThings); #1
const doThing = useDoThing(["currentThing"]); #2
const undoThing = useUndoThing(["currentThing"]); #2
const removeThing = #3
useRemoveThing(seeAllThings); #3
const { data: thing } = useQuery({ #4
queryKey: ["currentThing", { id }], #4
queryFn: () => loadThing(id), #4
});
return {
thing,
doThing: () => doThing(id),
undoThing: (did) => undoThing({ id, did }),
undoLastThing: () => undoThing({ id, did: "last" }),
removeThing: () => removeThing(id),
seeAllThings,
};
}
The detail-view hook reads the current ID from UX state and passes it into a TanStack Query request, making the boundary between view selection and loaded data concrete. section 9.3.3
For a quick state check, select a component in React Developer Tools. The components inspector exposes values from `useState` and `useReducer` hooks and lets you manipulate them. It also shows a context value on a consumer, but does not let you modify that value there. section 4.4.3
