Back to Home
React logoReact v18.0INTERMEDIATE

React Hooks

React Hooks cheat sheet with useState, useEffect, useRef, useContext, and custom hook patterns with practical code examples.

8 min read
reacthooksstateeffectsrefmemo

Other React Sheets

React Components & JSXBEGINNERReact Custom HooksADVANCEDReact Design PatternsADVANCEDReact Router v7INTERMEDIATETanStack QueryINTERMEDIATETanStack RouterINTERMEDIATE

State & Updates

Managing component state and triggering re-renders

useState

Local component state

javascript
💡 State updates are batched automatically
⚡ Use function update for values based on previous state
⚠️ State updates are async - don't read immediately after setting

useReducer

Complex state logic with actions

javascript
✅ Better than useState for complex logic
💡 Actions make state changes predictable
⚡ Great for forms with many fields

Side Effects

Handle side effects and external interactions

useEffect

Side effects and lifecycle

javascript
⚠️ Always include dependencies or ESLint will warn
💡 Return cleanup function for subscriptions
✅ Empty deps [] = componentDidMount

useLayoutEffect

Synchronous DOM updates

javascript
⚠️ Blocks visual updates - use sparingly
💡 Same API as useEffect but synchronous

Context & Refs

Share data and access DOM elements

useContext

Consume context values

javascript
💡 Component re-renders when context value changes
✅ Better than prop drilling for deep trees

useRef

Mutable refs and DOM access

javascript
⚠️ .current changes don't trigger re-renders
💡 Perfect for storing previous values
✅ Use for DOM elements, timers, subscriptions

Performance

Optimize re-renders and expensive operations

useMemo

Memoize expensive calculations

javascript
💡 Only use for expensive operations
⚠️ Don't overuse - adds complexity
✅ Great for: sorting, filtering, calculations

useCallback

Memoize functions

javascript
💡 Prevents unnecessary child re-renders
✅ Use when passing callbacks to memoized components
⚠️ Don't use for every function

Additional Hooks

Other useful built-in hooks

useImperativeHandle

Customize ref values

📄 Codejavascript
💡 Expose imperative API to parent
⚠️ Use sparingly - breaks React patterns

useId

Generate unique IDs

📄 Codejavascript
✅ SSR-safe unique IDs
💡 Perfect for form labels and ARIA attributes

React 18+ Hooks

New concurrent features

📄 Codejavascript
💡 useTransition for responsive UI during heavy updates
✅ useDeferredValue for expensive child components
🔍 useDebugValue shows in React DevTools

React 19 Hooks

use, useActionState, useFormStatus & useOptimistic

New hooks introduced in React 19 for promises, forms, and optimistic UI.

tsx
💡 use() reads a promise (or context) and suspends — works inside Suspense
⚡ useActionState replaces useFormState — wraps a server/client action with state + pending
📌 useFormStatus reads the parent <form>'s pending state — only works in children
🔥 useOptimistic shows an instant UI update while an async action is in flight

Custom Hook Patterns

Common custom hooks ready to use

Common Utility Hooks

Frequently used custom hooks

javascript
💡 Extract common logic into custom hooks
✅ Custom hooks can use other hooks
⚡ Share stateful logic, not state itself

Rules & Best Practices

Essential rules and patterns

Hook Rules

Must follow these rules

📄 Codejavascript
⚠️ Only call hooks at the top level
⚠️ Only call hooks from React functions
💡 ESLint plugin enforces these rules

More React Cheat Sheets

React Components & JSX

BEGINNER12 min

TanStack Query

INTERMEDIATE10 min

React Custom Hooks

ADVANCED20 min