Type-safe React Hooks patterns for state, refs, reducers, and custom hooks.
Typing common hooks in TypeScript.
Annotate nullable or union state explicitly.
const [user, setUser] = useState<User | null>(null);Useful when TypeScript cannot infer the full intended state type from the initializer.
const inputRef = useRef<HTMLInputElement | null>(null);Typing refs correctly improves DOM API autocomplete and safety.
Type reducer actions cleanly with a union.
type Action =
| { type: 'increment' }
| { type: 'decrement' }
| { type: 'reset'; payload: number };Discriminated unions give exhaustive reducer switch safety.
Typed custom hook APIs and generics.
Return readonly tuples for hooks that act like useState.
function useBoolean(initial = false): readonly [boolean, () => void] {
const [value, setValue] = useState(initial);
const toggle = () => setValue(v => !v);
return [value, toggle] as const;
}`as const` preserves tuple semantics for callers.
Type reusable async hook data generically.
type AsyncResult<T> = {
data: T | null;
error: Error | null;
loading: boolean;
};A reusable result type keeps async hook contracts consistent.