tsxANYreacthookstypescriptuseState
tsx
const [user, setUser] = useState<User | null>(null);Useful when TypeScript cannot infer the full intended state type from the initializer.
React Hooks with TypeScript
Type-safe React Hooks patterns for state, refs, reducers, and custom hooks.
Export
Copy the compact sheet, download it, or print it.
Download
`D` dense toggle · `C` copy all
TypeScript with State and Refs
Typing common hooks in TypeScript.
tsxANYreacthookstypescriptuseRef
tsx
const inputRef = useRef<HTMLInputElement | null>(null);Typing refs correctly improves DOM API autocomplete and safety.
tsxANYreacthookstypescriptuseReducer
tsx
type Action =
| { type: 'increment' }
| { type: 'decrement' }
| { type: 'reset'; payload: number };Discriminated unions give exhaustive reducer switch safety.
TypeScript Custom Hooks
Typed custom hook APIs and generics.
tsxANYreacthookstypescriptcustom-hooks
tsx
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.
tsxANYreacthookstypescriptasync
tsx
type AsyncResult<T> = {
data: T | null;
error: Error | null;
loading: boolean;
};A reusable result type keeps async hook contracts consistent.
More in React Hooks
React Hooks Recipes
Practical React Hooks recipes for UI interactions, timers, measurement, polling, and optimistic updates.
React Hooks Pitfalls and Best Practices
Common React Hooks mistakes, stale closure issues, dependency pitfalls, and practical best practices.
React Hooks Patterns
Reusable custom hook patterns for UI state, data fetching, forms, persistence, and interaction handling.
React Hooks Cheat Sheet
Built-in React Hooks reference covering state, effects, refs, context, memoization, transitions, and store subscriptions.